Native js의 width, height 획득 방식과 jquery의 width, height_javascript 스킬 획득 방식의 관계 비교

참고: 1. 높이를 구하는 상황은 너비를 구하는 상황과 동일하므로 아래에서는 너비를 구하는 상황만 설명합니다.
2. 아래에 언급된 모든 메소드와 속성이 반환하는 값은 단위가 없습니다.
　3. 설명의 편의를 위해 다음 상황은 약어로 표시합니다:

　obj ->는 네이티브 JS의 DOM 개체를 나타냅니다.
Width -> obj.style은 JQuery의 개체를 나타냅니다. .width
OffsetWidth -> obj.offsetWidth
$width -> obj.width()
$innerWidth -> obj.innerWidth()
$outerWidth -> obj.outerWidth()
padding -> 객체의 padding-left와 padding-right의 합을 나타냄
　border -> 객체의 border-left-width와 border-right-width의 합을 나타냄

관련 속성 너비를 얻기 위한 네이티브 JS의 너비는 너비와 오프셋 너비입니다. 너비 획득 방법은 obj.style.width이며 객체의 너비가 인라인으로 설정된 경우에만 얻을 수 있으며, 그렇지 않으면 빈 문자열이 반환됩니다. offsetWidth로 얻은 값은 JQuery의 객체로 얻은 externalWidth와 동일합니다. offsetWidth는 비표준이지만 잘 지원되는 속성입니다.

JQuery에는 너비(), innerWidth() 및 externalWidth()의 세 가지 메서드를 사용하여 너비를 가져옵니다. 구체적인 사용 방법은 obj.width(), obj.innerWidth(), obj.outerWidth()입니다. width()는 객체의 콘텐츠 너비를 구하고, innerWidth()는 객체의 콘텐츠 너비와 패딩 너비의 합을 구하며, externalWidth()는 테두리, 패딩 너비, 콘텐츠 너비를 포함한 너비를 가져옵니다.

이 다섯 가지 방법의 관계는 다음과 같습니다.

width = $width;
offsetWidth = 테두리 패딩 너비;
$innerWidth = 패딩 너비
$outerWidth; = 테두리 패딩 너비

이 다섯 가지 방법은 firefox, chrome, Opera, safari, ie6, ie7, ie8, ie9와 호환되지만 두 가지 문제가 있습니다. 1. 아래에서 너비가 설정되지 않은 경우 Chrome에서 처음으로 페이지를 열었는데, 얻은 너비가 모두 잘못되었습니다. 두 번째로 열면 결과는 Firefox와 일치합니다. 2. IE6에서 너비와 높이가 설정되지 않은 경우 스크롤바가 나타나지 않습니다.