outerWidth 메서드

outerWidth 메서드는 요소의 내부 여백(padding), 테두리(border) 및 선택적으로 외부 여백(margin)을 고려한 너비를 얻거나 변경할 수 있게 해줍니다. 중요한 점은 우리가 '계산된 너비' 값을 얻는다는 것입니다(computed width). 사용자가 페이지 크기를 변경하거나, 요소 또는 그 부모가 숨겨져 있는 경우에도 계산 오류가 발생할 수 있습니다.

구문

이렇게 하면 요소의 너비를 얻을 수 있습니다. 이 메서드는 true 또는 false (기본값은 false) 형태의 선택적 매개변수를 받을 수 있으며, 이는 외부 여백을 포함할지 여부에 따라 결정됩니다. 일부 경우 얻은 값은 소수일 수 있습니다:

$(selector).outerWidth([including_margin]);

요소의 너비를 변경하려면 단순히 숫자(예: 400)를 전달할 수 있으며, 이 경우 측정 단위는 픽셀이 됩니다. 또는 측정 단위를 명시한 문자열을 전달할 수도 있습니다(예: '10em'):

$(selector).outerWidth(new value, [including_margin]);

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

$(selector).outerWidth(function(index in set, current width value));

예제

비교를 위해 #test 단락의 너비 정보를 width, innerWidth 및 outerWidth 메서드로 얻어서 출력해 봅시다:

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);

$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);

함께 보기

width 메서드,
요소의 너비를 얻거나 변경할 수 있게 해줍니다.
innerWidth 메서드,
요소의 내부 여백을 고려한 너비를 얻거나 변경할 수 있게 해줍니다.