요소 차원(dimensions)_자바스크립트 스킬 설명

과거에는 이러한 속성을 기계적으로 외우고 잊어버린 경우 매뉴얼을 참조하는 경우가 거의 없었습니다. 이 글을 읽고 나면 이런 일이 다시는 일어나지 않을 것이라고 믿습니다.

요소가 차지하는 물리적 공간의 크기
요소가 차지하는 물리적 공간을 얻으려면 offsetHeight 및 offsetWidth를 사용하세요.
당연히 이 물리적 공간에는 패딩, 스크롤 막대, 테두리가 포함되어야 합니다. 이 두 속성은 getBoundingClientRect()의 높이 및 너비 속성과 일치합니다.
이해를 돕기 위해 아래 그림을 참고해주세요.

요소 콘텐츠의 가시 영역 크기
가시 영역에는 패딩이 포함됩니다. 하지만 테두리와 스크롤 막대는 포함되지 않습니다. 이때 clientHeight 및 clientWidth를 사용하십시오.
이해를 돕기 위해 아래 사진을 참고해주세요.

요소 전체 콘텐츠의 크기
실제 크기를 확인하고 싶다면 요소 콘텐츠에는 물론 보이지 않는 콘텐츠도 포함됩니다. 이때 scrollHeight/scrollWidth를 사용해야 합니다.
예를 들어 300*300 스크롤 가능한 컨테이너 요소에 600*400 그림이 포함되어 있는 경우 scrollWidth는 600을 반환하고 scrollHeight는 400을 반환합니다.
실제 측정값:
요소에 스크롤 막대가 있는 경우 Chrome 브라우저가 요소의 스크롤 높이를 얻을 때 때로는 부정확할 수 있습니다! 하지만 이 기사의 예는 정확합니다. 재현하는 방법을 모르겠습니다.
요소의 실제 크기 가져오기
대부분의 경우 요소의 전체 콘텐츠 크기는 고려하지 않습니다(창/문서/본문 요소 제외). 가장 일반적으로 사용되는 방법은 요소가 차지하는 크기(offsetHeight/offsetWidth)를 가져오는 것입니다.
예를 들어 특정 텍스트에 대한 사용자 정의 도구 설명을 설정하려면 대상 요소의 높이를 얻은 다음 도구 설명을 배치해야 합니다.
clientHeight와 offsetHeight 모두 패딩을 포함합니다. 이 텍스트에 100px 패딩이 포함되어 있다고 가정하면 이 툴팁의 위치는 매우 부정확할 것입니다.
따라서 요소의 높이를 얻으려면 일반적으로 패딩을 제거해야 합니다.
요소의 스타일 속성은 인라인 스타일의 너비/높이만 가져올 수 있으므로 IE에서는 el.currentStyle.height/width를 사용해야 합니다.
표준 브라우저에서는 window.getCompulatedStyle(el을 사용해야 합니다. ,null ).너비/높이.
다음은 정원 친구 Snandy가 요소의 실제 높이와 너비를 얻기 위해 컴파일한 방법입니다.

코드 복사 코드는 다음과 같습니다.

function getStyle(el) {
if(window.getCompulatedStyle) {
return window.getCompulatedStyle(el, null)
}else{
return el.currentStyle;
}
}
function getWH(el, name) {
var val = name === "width" ? el.offsetWidth : el.offsetHeight,
which = name === "width" ? ['Left', 'Right'] : ['Top', 'Bottom']
// 표시가 없음
if(val === 0) {
return 0;
}
var style = getStyle(el);
for(var i = 0, a; a = which[i ];) {
val -=parseFloat ( style[ "border" a "Width"]) || 0;
val -= parseFloat( style["padding" a ] ) || 0;
}
return val; 🎜>}


스크립트 라이브러리를 사용하면 몇 가지 어려운 문제를 해결하는 데 도움이 될 수 있습니다. jQuery 관련 메서드를 살펴보겠습니다.
jQuery.height()/jQuery.width()
일치하는 jQuery 객체에 대해 정수를 반환합니다. 컬렉션의 첫 번째 요소 값입니다.
이 결과에는 상자 모델이 고려되지 않으며 요소 패딩이 포함되지 않습니다. 이 메서드는 getWH(el,'height/width')
이 메서드는 창과 문서의 높이도 계산할 수 있습니다.
jQuery.innerHeight()/jQuery.innerWidth()
jQuery.height() /jQuery.width() 비교 이 결과에는 패딩이 포함되지만 테두리는 포함되지 않습니다.
요소 el에 테두리가 설정되지 않은 경우 이 메서드는 el.offsetHeight/offsetWidth와 동일합니다.
jQuery.outerHeight()/jQuery.outerWidth()
jQuery.height() /jQuery.width() 비교 이 결과에는 패딩과 테두리가 포함되며 기본적으로 여백은 포함되지 않습니다.
요소가 여백을 지정하지 않는 경우 이 메서드는 el.offsetHeight/offsetWidth와 동일합니다.
bool 변수를 전달하여 여백을 포함할지 여부를 지정할 수 있습니다.
참고:
일반 요소(창, 문서, iframe 등과 같은 특정 요소 제외)의 전체 콘텐츠 크기를 얻는 것은 별 의미가 없으므로
이 세 가지 방법은 jQuery는 보이지 않는 영역을 포함하지 않습니다.
작은 테스트
다음은 높이 200px, 패딩 3px, 테두리 1px의 div이고, 내부 이미지는 958*512입니다.

위 값을 올바르게 추측하셨나요? ?

업데이트
크롬에서 scrollHeight가 정확하지 않은 이유는 jQuery.ready()를 사용하고 테스트 중인 요소에 이미지가 포함되어 있기 때문입니다.
jQuery.ready()를 사용해본 사람은 모두 이때 DOM 트리가 로드되었다는 사실을 알고 있지만 이미지 요소는 아직 완전히 로드되지 않았으므로 크롬의 처리 방법이 정확합니다.
그래서 위의 예를 다시 테스트했습니다.
IE 6/8의 반환 결과는 522/519입니다.
Chrome은 189의 결과를 반환합니다.
Firefox는 조금 특별합니다. 지속적으로 새로 고침하는 두 가지 유형이 있습니다. 페이지 결과는 1) 522; 2) 189이지만 대부분의 경우 522입니다.
이 상황은 jQuery 1.6.2의 준비 기능 구현과 관련이 있어야 합니다.
그러나 위의 결과로 볼 때 크롬에서는 jQuery.ready()가 가장 안전하고 빠르다는 것을 유추할 수 있습니다.

<div style="padding:3px;border:1px solid #000;height:200px;overflow:scroll;" id="d1"> <img src="http://files.jb51.net/upload/201109/20110913224231935.jpg" alt=""> </div> <div> <button type="button" onclick="alert(document.getElementById('d1').clientHeight)">클라이언트 높이</button> <button type="button" onclick="alert(document.getElementById('d1').offsetHeight)">오프셋 높이</button> <button type="button" onclick="alert(document.getElementById('d1').scrollHeight)">스크롤 높이</button> <button type="button" onclick="alert($('#d1').height())">jQuery.height()</button> <button type="button" onclick="alert($('#d1').innerHeight())">jQuery.innerHeight()</button> <button type="button" onclick="alert($('#d1').outerHeight())">jQuery.outerHeight()</button> </div>
[Ctrl A Select All 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

참고 자료

요소 크기 결정
Internet Explorer 9에서 CSSOM을 사용하여 요소 크기 및 위치 측정