offsetHeight, clientHeight, scrollHeight 란 무엇입니까?

차이점이 무엇인지 설명의 생각 offsetHeight, clientHeight그리고 scrollHeight나 offsetWidth, clientWidth그리고 scrollWidth?

클라이언트 측에서 작업하기 전에이 차이점을 알아야합니다. 그렇지 않으면 그들의 삶의 절반이 UI 수정에 소비됩니다.

바이올린 또는 인라인 아래 :

function whatis(propType) {
  var mainDiv = document.getElementById("MainDIV");
  if (window.sampleDiv == null) {
    var div = document.createElement("div");
    window.sampleDiv = div;
  }
  div = window.sampleDiv;
  var propTypeWidth = propType.toLowerCase() + "Width";
  var propTypeHeight = propType + "Height";

  var computedStyle = window.getComputedStyle(mainDiv, null);
  var borderLeftWidth = computedStyle.getPropertyValue("border-left-width");
  var borderTopWidth = computedStyle.getPropertyValue("border-top-width");

  div.style.position = "absolute";
  div.style.left = mainDiv.offsetLeft + Math.round(parseFloat((propType == "client") ? borderLeftWidth : 0)) + "px";
  div.style.top = mainDiv.offsetTop + Math.round(parseFloat((propType == "client") ? borderTopWidth : 0)) + "px";
  div.style.height = mainDiv[propTypeHeight] + "px";
  div.style.lineHeight = mainDiv[propTypeHeight] + "px";
  div.style.width = mainDiv[propTypeWidth] + "px";
  div.style.textAlign = "center";
  div.innerHTML = propTypeWidth + " X " + propTypeHeight + "( " +
    mainDiv[propTypeWidth] + " x " + mainDiv[propTypeHeight] + " )";



  div.style.background = "rgba(0,0,255,0.5)";
  document.body.appendChild(div);

}
document.getElementById("offset").onclick = function() {
  whatis('offset');
}
document.getElementById("client").onclick = function() {
  whatis('client');
}
document.getElementById("scroll").onclick = function() {
  whatis('scroll');
}

#MainDIV {
  border: 5px solid red;
}

<button id="offset">offsetHeight & offsetWidth</button>
<button id="client">clientHeight & clientWidth</button>
<button id="scroll">scrollHeight & scrollWidth</button>

<div id="MainDIV" style="margin:auto; height:200px; width:400px; overflow:auto;">
  <div style="height:400px; width:500px; overflow:hidden;">

  </div>
</div>

차이점을 이해하려면 상자 모델 을 이해해야 하지만 기본적으로 다음과 같습니다.

clientHeight :

패딩을 포함하지만, 화소의 요소의 내부 높이를 반환 하지 수평 스크롤바 높이 , 보더 또는 마진

offsetHeight :

는 element borders , element vertical padding, element horizontal scrollbar (존재하는 경우) 및 CSS CSS 높이 를 포함 하는 측정 값입니다 .

scrollHeight :

요소의 내용의 높이의 측정이다 포함한 콘텐츠 보이지 화면 오버플로 인해이

나는 더 쉽게 만들 것입니다 :

치다:

<element>                                     
    <!-- *content*: child nodes: -->        | content
    A child node as text node               | of
    <div id="another_child_node"></div>     | the
    ... and I am the 4th child node         | element
</element>                                    

scrollHeight : 요소의 ENTIRE content & padding (visible or not)
_{높이에 관계없이 모든 내용의 높이 + 안쪽 여백.}

clientHeight : VISIBLE content & padding
_{가시 높이 만 : 요소의 명시 적으로 정의 된 높이로 콘텐츠 부분이 제한됩니다.}

offsetHeight : VISIBLE content & padding + border + scrollbar
_{문서의 요소가 차지하는 높이입니다.}

* offsetHeight 는 테두리, 패딩 및 요소의 가로 스크롤 막대를 포함 하여 요소의 CSS 높이 픽셀 단위로 측정 한 것입니다 .

clientHeight 속성은 패딩을 포함한 요소의 볼 수있는 높이를 픽셀 단위로 반환 하지만 테두리, 스크롤 막대 또는 여백 은 반환 하지 않습니다.

scrollHeight 값은 세로 스크롤 막대를 사용하지 않고 뷰포트의 모든 내용을 맞추기 위해 요소에 필요한 최소 높이와 같습니다 . 높이는 clientHeight와 같은 방식으로 측정됩니다. 요소의 안쪽 여백은 포함하지만 테두리, 여백 또는 가로 스크롤 막대는 포함되지 않습니다.

높이 대신 너비가있는 모든 경우도 마찬가지입니다.

세 가지에 대한 내 설명 :

• offsetHeight : 요소가 차지하는 부모의 "상대적 위치"공간의 양. (즉, 요소의 position: absolute자손을 무시합니다 )
• clientHeight : 요소의 자체 경계, 여백 및 가로 스크롤 막대의 높이 (있는 경우)를 제외하고 오프셋 높이와 동일합니다.
• scrollHeight : position: absolute스크롤하지 않고 모든 요소의 내용 / 하위 항목 (요소 포함 ) 을 보는 데 필요한 공간

그런 다음도 있습니다 :

• getBoundingClientRect (). height : 요소의 CSS 변환이 적용된 후에 계산된다는 점을 제외하고 scrollHeight와 동일합니다 .

오프셋 "줄이 벗어난 정도 또는 거리"를 의미합니다. 여백 또는 테두리는 HTML 요소의 실제 높이 또는 너비를 "out of line"으로 만드는 것입니다. 다음을 기억하는 데 도움이됩니다.

• offsetHeight 는 테두리, 패딩 및 요소의 가로 스크롤 막대를 포함하여 요소의 CSS 높이 픽셀 단위로 측정됩니다.

반면에 clientHeight는 OffsetHeight의 반대라고 말할 수있는 것입니다. 테두리 나 여백은 포함되지 않습니다. 여백은 HTML 컨테이너 내부에 상주하기 때문에 여백을 포함하므로 여백이나 경계와 같은 추가 측정으로 계산되지 않습니다. 그래서 :

• clientHeight 속성은 패딩을 포함하여 테두리, 스크롤 막대 또는 여백이 아닌 요소의 볼 수있는 높이를 픽셀 단위로 반환합니다.

ScrollHeight는 스크롤 가능한 모든 영역이므로 스크롤이 여백이나 테두리를 넘지 않으므로 scrollHeight에는 여백이나 테두리가 포함되지 않지만 패딩은 포함됩니다. 그래서:

• scrollHeight 값은 세로 스크롤 막대를 사용하지 않고 뷰포트의 모든 내용을 맞추기 위해 요소에 필요한 최소 높이와 같습니다. 높이는 clientHeight와 같은 방식으로 측정됩니다. 요소의 안쪽 여백은 포함하지만 테두리, 여백 또는 가로 스크롤 막대는 포함되지 않습니다.