jQuery의 `width`, `innerWidth`, `outerWidth`, `height`, `innerHeight` 및 `outerHeight`의 차이점은 무엇입니까?

jQuery의 차원 속성: width, innerWidth, externalWidth, height, innerHeight, externalHeight

jQuery 라이브러리는 크기를 조작하고 검색할 수 있는 다양한 속성을 제공합니다. HTML 요소의 크기. 이러한 속성에는 width, innerWidth, externalWidth, height, innerHeight 및 externalHeight가 포함됩니다. 요소 크기 조정을 정확하게 제어하려면 이들 차이점을 이해하는 것이 중요합니다.

너비 및 높이와 innerWidth 및 innerHeight

너비 및 높이 속성은 요소의 전체 크기를 나타냅니다. , 내용과 패딩은 포함하지만 테두리와 스크롤바는 제외됩니다. 반면, innerWidth 및 innerHeight는 패딩을 제외하고 요소 내 콘텐츠 영역의 크기를 나타냅니다.

outerWidth 및 externalHeight

outerWidth 및 externalHeight는 요소 내에 있는 모든 것을 포함합니다. 콘텐츠, 패딩, 테두리 및 스크롤 막대를 포함한 요소입니다. 이를 통해 여백과 테두리가 가변적인 경우에도 페이지에서 요소가 차지하는 전체 공간을 정확하게 확인할 수 있습니다.

예

다음 HTML 코드를 고려하세요.

<div class="test">
  <p>Hello World!</p>
</div>

.test {
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 1px solid #000;
}

jQuery를 사용하면 ".test"의 크기를 검색할 수 있습니다. div:

var myDiv = $('.test');
var width = myDiv.width(); // 220px (width + padding + border)
var innerWidth = myDiv.innerWidth(); // 200px (width + padding)
var outerWidth = myDiv.outerWidth(); // 222px (width + padding + border + margin)

var height = myDiv.height(); // 170px (height + padding + border)
var innerHeight = myDiv.innerHeight(); // 150px (height + padding)
var outerHeight = myDiv.outerHeight(); // 172px (height + padding + border + margin)

보시다시피 width, height, innerWidth, innerHeight, externalWidth 및 externalHeight 속성은 요소 크기 측정에 다양한 수준의 세분성을 제공하여 레이아웃과 레이아웃에 대한 유연성과 정밀한 제어를 가능하게 합니다. 웹페이지의 모습.

위 내용은 jQuery의 `width`, `innerWidth`, `outerWidth`, `height`, `innerHeight` 및 `outerHeight`의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!