본문 바로가기
멀티캠퍼스 풀스택 과정/프론트엔드

프론트엔드5-6. jquery 요소의 조작(수치 함수 메서드)

by 이쟝 2022. 2. 16.

1. HTML 파일 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>수치조작</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        div:nth-of-type(1) {
            border:1px solid red;
        }
        div:nth-of-type(2) {
            width:300px; height:450px; background-color:Lightblue;
            border:1px solid red;
        }
        div:nth-of-type(3) {
            position:absolute; 
            background:beige; 
            top:100px; 
            margin:50px;
            padding:20px;
            right:100px;
            border:2px solid red;
        }
    </style>
</head>
<body>
    <div>수치 조작 메서드</div>
    <div><h1>1234567</h1></div>
    <div></div>
</body>
</html>

2.  js파일 

$(()=>{
	
	$("div:eq(2)").append("<h1>수치함수</h1>");

});

3.  폭과 높이를 구하는 함수

1. width( ): 폭을 구하는 함수 / height( ): 높이를 구하는 함수

$(()=>{
	
	let width = $("div").eq(1).width();
	let height = $("div:eq(1)").height();
	$("div:eq(1)").append("<h3>width="+width+", height="+height+"</h3>");

});

2. innerWidth(), innerHeight() outerWidth(), outerHeigth()

  • innerWidth(), innerHeight() -> padding을 포함한 폭과 높이
  • outerWidth(), outerHeigth() -> border, padding을 포함한 폭과 높이
$(()=>{

	let d = $("div:eq(2)");
	let iW = d.innerWidth();
	let iH = d.innerHeight();
	let oW = d.outerWidth();
	let oH = d.outerHeight();

	$("div:eq(1)").append("<h3>innerWidth="+iW+", innerHeight="+iH+"</h3>");
	$("div").eq(1).append("<h3>outerWidth="+oW+", outerHeight="+oH+"</h3>");

});

4.  좌표를 구하기

1. position( ).left : left의 좌표를 구한다. / position( ).top: top의 좌표를 구한다. 

  •  position(): 마진을 포함한 좌표
$(()=>{

	let d = $("div:eq(2)");
	let left = d.position().left;
	let top = d.position().top;
	
	$("div:eq(1)").append("<h3>left="+left+", top="+top+"</h3>");

});

2. offset( ).left : left의 좌표를 구한다. / offset( ).top: top의 좌표를 구한다. 

  • offset( ): margin, border을 제외하고 좌표를 구한다.  
$(()=>{

	let d = $("div:eq(2)");
	let left2 = d.offset().left;
	let top2 = d.offset().top;
	
	$("div:eq(1)").append("<h3>offset.left="+left2+", offset.top="+top2+"</h3>");
		
});

 

4.  스크롤(scroll)바의 위치를 이동하거나 위치를 구한다.

1. scrollTop( ) 세로 스크롤 / scrollLeft( ) 가로 스크롤

$(()=>{
	
	$(window).scrollTop(200);
	$(window).scrollLeft(500);
		
});

 

저작자표시

'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글

프론트엔드5-8. jquery trigger()  (0) 2022.02.16
프론트엔드5-7. jquery 이벤트 처리하기(onxx)와 hover  (0) 2022.02.16
프론트엔드5-5. jquery 요소의 조작3(addClass,removeClass,hasClass,toggleClass)  (0) 2022.02.16
프론트엔드5-4. jquery 요소의 조작2(wrap, each, map)  (0) 2022.02.16
프론트엔드5-3. jquery 요소의 조작1(추가, 삭제, 변경, 복사)  (0) 2022.02.16

관련글

티스토리툴바