jQuery의 innerWidth 및 innerHeight 메서드

innerWidth 및 innerHeight 메서드를 사용하면 요소의 너비와 높이를 얻을 수 있지만, 콘텐츠뿐만 아니라 내부 패딩(padding)도 포함됩니다.

innerWidth와 innerHeight를 사용하여 단락 #test의 너비와 높이 값을 얻고 다른 단락에 출력해 봅시다. 두 개의 단락이 있다고 가정합니다:

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

CSS는 다음과 같습니다:

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

Javascript에는 다음 코드를 작성합니다:

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

보시다시피 값은 이제 10px만큼 차이가 납니다. 이는 내부 패딩이 고려되었기 때문이며, 우리의 경우 모든 면에서 5px씩입니다.

또한 innerWidth와 innerHeight 메서드를 사용하여 요소의 너비와 높이 값을 간단히 변경할 수도 있습니다. 예를 들어, div #test1의 너비를 250px로, div #test2의 높이를 200px로 설정해 봅시다:

$('#test1').innerWidth(250);
$('#test2').innerHeight(200);

첫 번째 작업의 해결책을 보완하세요 - div #wrapper 아래의 두 번째 단락에 div #wrapper의 너비와 높이 값을 출력하되, 이번에는 테두리와 외부 여백은 제외하고 내부 패딩만 고려한 값을 출력하세요.