innerWidth 메서드

innerWidth 메서드는 요소의 내부 패딩을 고려한 너비를 가져오고 변경할 수 있습니다. 중요한 점은 우리가 '계산된 너비' (computed width)를 얻게 된다는 것입니다. 사용자가 페이지 크기를 변경하거나, 요소 또는 그 부모가 숨겨진 경우 계산 오류가 발생할 수도 있습니다. 너비 값은 요소의 테두리 두께를 고려하지 않습니다.

구문

요소 너비 가져오기. 일부 경우에 얻은 값은 소수일 수 있습니다:

$(셀렉터).innerWidth();

요소 너비를 변경하려면 - 단순히 숫자를 전달할 수 있습니다 (예: 400), 그러면 측정 단위는 픽셀이 됩니다. 또는 문자열과 측정 단위를 지정할 수 있습니다(예: '10em'):

$(셀렉터).innerWidth(새 값);

또한, 지정된 함수를 세트의 각 요소에 적용할 수 있습니다. 이때 함수는 첫 번째 매개변수로 세트 내 요소의 인덱스를 받고, 두 번째 매개변수로 해당 요소에 대한 현재 너비 값을 받습니다. 함수 내부의 this 값은 현재 요소를 가리킵니다. 요소의 너비 값은 함수가 반환하는 값으로 변경됩니다:

$(셀렉터).innerWidth(function(세트 내 인덱스, 현재 너비 값));

예제

비교를 위해, 단락 #test의 너비 정보를 width 메서드와 innerWidth 메서드로 얻어 출력해 보겠습니다:

<p id="test">텍스트</p>
<p id="out1"></p>
<p id="out2"></p>

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

우리는 10px의 차이를 볼 수 있습니다. 이는 왼쪽과 오른쪽 내부 패딩의 합계입니다.

함께 보기

width 메서드,
요소 너비를 가져오고 변경할 수 있게 해줍니다
outerWidth 메서드,
요소의 패딩과 테두리를 고려한 너비를 가져오고 변경할 수 있게 해줍니다