jQuery의 width 및 height 메서드

width 메서드와 height 메서드는 각각 padding, border 및 margin을 고려하지 않고 요소 콘텐츠의 너비와 높이를 가져옵니다.

단락 #test의 너비 및 높이 값을 가져와 다른 단락에 출력해 봅시다. 예를 들어 다음 HTML 코드를 사용합니다:

html<p id="test">텍스트</p>
<p id="out"></p>

단락의 CSS 스타일은 다음과 같습니다:

cssp {
  margin: 10px;
  padding: 5px;
}

이제 Javascript 코드를 작성합니다:

javascriptlet w = $('#test').width();
let h = $('#test').height();
$('#out').text('너비: ' + w + ' 높이: ' + h);

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

javascript$('#test1').width(250);
$('#test2').height(200);

html<div id="wrapper">
<div id="test">텍스트</div>
</div>
<p id="one"></p>
<p id="two"></p>
<p id="three"></p>
<p id="four"></p>

cssdiv {
margin: 10px;
padding: 5px;
border: 2px solid green;
}
#wrapper {
border-color: blueviolet;
}