[jQuery] 제이쿼리 width / height

 

jquery .width()

 

.width()는 요소의 너비 값을 가져올때 사용합니다.

 

.width()는 css로 따지면 width의 값만 가져온다

 

.innerWidth()는 요소의 크기 + 패딩(padding)의 가로 값을 가져온다.

.outerWidth()는 요소의 크기 + 패딩 크기 +보더(border)의 가로 크기를 가져온다.

.outerWidth(true)는 요소의 크기 + 패딩의 가로, 세로 크기 + 보더의 크기 + 마진(margin) 가로 크기의 값을 가져온다.

 

$(document).ready(function(){
	$('div').width();	//div의 width 값
    	$('div').innerWidth();	//div의 width + padding-left + padding-right 값
    	$('div').outerWidth();	//div의 width + padding-left + padding-right + border-left + border-right 값
    	$('div').outerWidth(true);	//div의 width + padding-left + padding-right + border-left + border-right + margin-left + margin-right 값
})

jquery .height()

 

.height()는 요소의 너비 값을 가져올때 사용합니다.

 

.height()는 css로 따지면 height의 값만 가져온다

 

.innerHeight()는 요소의 크기 + 패딩(padding)의 세로 값을 가져온다.

.outerHeight()는 요소의 크기 + 패딩 크기 +보더(border)의 세로 크기를 가져온다.

.outerHeight(true)는 요소의 크기 + 패딩의 가로, 세로 크기 + 보더의 크기 + 마진(margin) 세로 크기의 값을 가져온다.

 

 

$(document).ready(function(){
	$('div').height();	//div의 height 값
    	$('div').innerHeight();	//div의 height + padding-top + padding-bottom 값
    	$('div').outerHeight();	//div의 height + padding-top + padding-bottom + border-top + border-bottom 값
    	$('div').outerHeight(true);	//div의 height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom 값
})

1. 퍼센트 구할 때 : 전체 길이에서 내가 있는 상태의 길이를 구할때 

 

2021.04.12 - [웹언어/JavaScript] - [JS] 프로그래스 조절

[JS] 프로그래스 조절

 

2. 크기 값을 바꿀 때

$(document).ready(function(){
    $('div').height('300');	//div의 height 값 바꿈
    $('div').width('400');	//div의 width 값 바꿈
})