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

jQuery에서 Width, InnerWidth, OuterWidth 구별

이러한 속성의 차이점을 설명하기 위해 해당 속성의 정의와 실제 기능을 자세히 살펴보겠습니다. 구현.

너비

• 패딩은 제외하고 테두리는 포함하여 요소의 너비를 나타냅니다.
  innerWidth
• 패딩을 제외한 요소의 너비를 정의합니다. borders.
  outerWidth
• 패딩과 테두리를 모두 포함하여 요소의 너비를 포함합니다.

마찬가지로 높이, 내부 높이 및 outerHeight는 수직 차원에서 작동합니다.

주어진 예에서:

var div = $('.test');

요소의 정의된 너비는 200px, 높이는 150px이고 패딩이나 패딩은 없습니다. 국경. 따라서 세 가지 너비 관련 속성(width, innerWidth 및 outerWidth)은 모두 "200px"를 반환합니다. 마찬가지로 세 가지 높이 관련 속성은 모두 "150px"를 반환합니다.

그러나 패딩이나 테두리가 요소에 적용된 경우 결과는 달라집니다.

<div class="test">

이 시나리오에서는 다음과 같습니다.

• 너비는 여전히 "200px".
• innerWidth는 "180px"(200px - 20px 패딩)입니다.
• outerWidth는 "220px"(200px 2 × 5픽셀 border).

이러한 속성은 jQuery에서 요소 크기로 작업하고 다양한 CSS 스타일을 수용하기 위한 세부적인 수준의 제어를 제공합니다.

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