jQuery의 outerWidth 및 outerHeight 메서드

마지막 한 쌍의 메서드는 outerWidth와 outerHeight입니다. 이 메서드를 사용하면 모든 여백과 테두리를 고려하여 요소의 너비와 높이를 얻을 수 있으며, 외부 여백 margin를 고려하지 않을 수도 있습니다.

예제를 살펴보겠습니다. 다음과 같은 단락이 있다고 가정합니다:

<p id="test">text</p>
<p id="out"></p>

CSS는 다음과 같습니다:

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

단락 #test의 너비와 높이 값을 얻어봅시다. 안쪽 여백과 테두리를 포함하려면 이 메서드에 false를 전달하거나 괄호를 비워둡니다(기본값이기 때문입니다):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

이제 우리의 값은 4px만큼 더 차이가 날 것입니다. 각 면의 테두리 두께가 2px이기 때문입니다.

이제 단락 #test의 너비와 높이 값을 얻어봅시다. 모든 여백과 테두리를 포함하려면 outerWidth 및 outerHeight 메서드에 true를 전달해야 합니다:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

이제 우리의 값은 이전 값보다 20px만큼 더 차이가 날 것입니다. 외부 여백이 각 면마다 10px이기 때문입니다.

이전 작업들의 해결책을 보완하십시오 - 디브 #wrapper 아래의 세 번째 단락에 디브 #wrapper의 너비와 높이 값을 출력하십시오. 안쪽 여백과 테두리는 포함하지만 외부 여백은 제외한 값입니다. 네 번째 단락에는 모든 여백과 테두리를 포함한 디브 #wrapper의 너비와 높이 값을 출력하십시오.

또한 outerWidth 및 outerHeight 메서드를 사용하여 요소의 너비와 높이 값을 변경할 수도 있습니다. 예를 들어, 디브 #test1의 너비를 250px로 설정하고, #test2의 높이를 200px로 설정해 봅시다:

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

요소 크기 작업에 관한 언급된 모든 메서드는 또한 세트 내 각 요소에 함수를 적용하는 가능성을 제공합니다.