코밍이의 하루

[JQuery] 객체 조작 메소드 - 수치 조작 메소드 본문

웹언어 공부/JQuery

[JQuery] 객체 조작 메소드 - 수치 조작 메소드

코밍이 2021. 8. 18. 20:14

1. 개발 환경

구분 내용
사용 언어 HTML5, CSS3, JS, jQuery
개발환경 Visual Studio Code
참고 도서 [Do it] 자바스크립트 + 제이쿼리 입문
웹브라우저 Chrome

2. 주요 문법

1) 수치 조작 메소드
- 요소의 너빗값 또는 높잇값 같은 수치를 바꿀 때 사용

종류 사용법 설명
height() $("요소 선택").height();
$("요소 선택").height(100);		 안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환
width() $("요소 선택").width();
$("요소 선택").width(100);		 안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환
innerHeight() $("요소 선택").innerHeight();
$("요소 선택").innerHeight(300);		 안쪽 여백을 포함한 높잇값을 반환하거나 변환
innerWidth() $("요소 선택").innerWidth();
$("요소 선택").innerWidth(100);		 안쪽 여백을 포함한 너빗값을 반환하거나 변환
outerHeight() $("요소 선택").outerHeight();
$("요소 선택").outerHeight(100);		 선과 안쪽 여백을 포함한 높잇값을 반환하거나 변환
outerWidth() $("요소 선택").outerWidth();
$("요소 선택").outerWidth(100);		 선과 안쪽 여백을 포함한 너빗값을 반환하거나 변환
position() $("요소 선택").position().left;
$("요소 선택").position().top;		 선택한 요소의 포지션 위칫값을 반환
offset() $("요소 선택").offset().left;
$("요소 선택").offset().top;		 선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지에 대한 값을 반환
scrollLeft() $(window).scrollLeft(); 브라우저의 수평 스크롤 이동 높잇값을 반환
scrollTop() $(window).scrollTop(); 브라우저의 수직 스크롤 이동 너빗값을 반환

 

3. 소스 코드 및 실행 결과

- jq_selec3_6_test.html

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title> 객체 조작 및 생성 </title>  
		<script src="js/jquery.js"></script>
		<script>
			$(function( ){
				var w1 = $("#p1").width();
				console.log(w1);

				var w2 = $("#p1").innerWidth();
				console.log(w2);

				var w3 = $("#p1").outerWidth();
				console.log(w3);

				$("#p2").outerWidth(100).outerHeight(100);
			});
		</script>
	<style>
		*{padding: 0;}
		#p1, #p2{
			width: 50px;
			height: 50px;
			padding:20px;
			border: 5px solid #000;
			background-color: #ff0;
		}
	</style>
	</head>
	<body>
		<h1>수치 조작 메서드</h1>
		<p id="p1">내용1</p>
		<p id="p2">내용2</p>
	</body>
</html>

 

jq_selec3_6_test.html

- jq_selec3_7_test.html

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title> 객체 조작 및 생성 </title>  
		<script src="js/jquery.js"></script>
		<script>
			$(function( ){
				var $txt1 = $(".txt_1 span"),
					$txt2 = $(".txt_2 span"),
					$box = $(".box");

				var off_t = $box.offset().top;
				var pos_t = $box.position().top;

				$txt1.text(off_t);
				$txt2.text(pos_t);
			});
		</script>
		<style>
			*{margin:0;padding:0;}
			#box_wrap{
					width:300px;
					height:200px;
					margin:50px auto 0;
					position: relative;
					background-color:#ccc;
			}
			.box{
					width:50px;height:50px;
					position:absolute;
					left:100px;top:50px;
					background-color:#f00;
			}
		</style>
	</head>
	<body>
		<div id="box_wrap">
			<p class="box">박스</p>
		</div>
		<p class="txt_1">절대 top위칫값: <span></span></p>
		<p class="txt_2">상대 top위칫값: <span></span></p>
	</body>
</html>

jq_selec3_7_test.html

- jq_selec3_8_test.html

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title> 객체 조작 및 생성 </title>  
		<script src="js/jquery.js"></script>
		<script>
			$(function( ){
				var topNum = $("h1").offset().top;
				$(window).scrollTop(topNum);

				var sct = $(window).scrollTop();
				console.log(sct);
			});
		</script>
	<style>
		*{margin:0;padding:0;}
		body{line-height:1;}
		#wrap{
				height:5000px;
				padding-top:2000px;
		}
	</style>
	</head>
	<body>
		<div id="wrap">
				<h1>위치 메서드</h1>
		</div>
	</body>
</html>

jq_selec3_8_test.html

저작자표시 비영리 변경금지

'웹언어 공부 > JQuery' 카테고리의 다른 글

[JQuery] 이벤트 메소드  (0) 2021.08.19
[JQuery] 객체 조작 메소드 - 객체 편집 메소드  (0) 2021.08.18
[JQuery] 객체 조작 메소드 - 속성 조작 메소드  (0) 2021.08.18
[JQuery] 탐색 선택자 - 콘텐츠 탐색 선택자  (0) 2021.08.18
[JQuery] 탐색 선택자 - 속성 탐색 선택자  (0) 2021.08.18
'웹언어 공부/JQuery' Related Articles more