오프셋이란높이, 클라이언트높이, 스크롤 높이?

오프셋이란높이, 클라이언트높이, 스크롤 높이?

어떤 차이가 있는지 설명하려고 생각했다.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>

차이점을 알기 위해서는 박스 모델을 이해할 필요가 있지만 기본적으로 다음과 같습니다.

클라이언트 높이:

패딩을 포함하지만 수평 스크롤바 높이, 테두리 또는 여백은 포함하지 않는 요소의 내부 높이를 픽셀 단위로 반환합니다.

오프셋 높이:

는 요소 경계, 요소 수직 패딩, 요소 수평 스크롤바(있는 경우 렌더링) 및 요소 CSS 높이를 포함하는 측정치입니다.

스크롤 높이:

오버플로우 때문에 화면에 표시되지 않는 콘텐츠를 포함한 요소의 콘텐츠 높이를 측정한 값입니다.

---

더 쉽게 만들겠습니다.

고려사항:

<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>                                    

스크롤 높이:ENTIRE content & padding (visible or not)
_{요소의 높이에 관계없이 모든 컨텐츠 + 패딩의 높이입니다.}

클라이언트 높이:VISIBLE content & padding
_{표시 가능한 높이만: 요소의 명시적으로 정의된 높이로 제한되는 내용 부분.}

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

* 오프셋높이는 테두리, 패딩 및 요소의 수평 스크롤 막대를 포함한 요소의 CSS 높이의 픽셀 단위입니다.

* 클라이언트높이 속성은 테두리, 스크롤 막대 또는 여백이 아닌 패딩을 포함하여 요소의 표시 가능한 높이를 픽셀 단위로 반환합니다.

* 스크롤 높이 값은 수직 스크롤 막대를 사용하지 않고 뷰포트의 모든 콘텐츠를 맞추기 위해 요소가 필요로 하는 최소 높이와 동일합니다.높이는 클라이언트와 같은 방법으로 측정됩니다.높이: 요소의 패딩은 포함되지만 테두리, 여백 또는 수평 스크롤 막대는 포함되지 않습니다.

높이가 아닌 너비로도 마찬가지입니다.

이 세 가지에 대한 설명:

• 오프셋 높이:요소가 차지하는 부모의 "상대적 위치 지정" 공간의 양(즉, 요소의 위치를 무시함)position: absolute후예)
• client Height: 요소의 자체 테두리, 여백 및 수평 스크롤 바의 높이(있는 경우)를 제외한 점을 제외하고 오프셋 높이와 동일합니다.
• 스크롤 높이:요소의 모든 내용/후행물을 표시하기 위해 필요한 공간(다음 포함)position: absolute스크롤하지 않습니다.

또, 다음과 같은 것도 있습니다.

• getBoundingClientRect()를 지정합니다.height: 요소의 css 변환이 적용된 후 계산된다는 점을 제외하고 스크롤 하이트와 동일합니다.

오프셋은 "어떤 것이 선을 벗어난 양 또는 거리"를 의미합니다.여백 또는 테두리는 HTML 요소의 실제 높이 또는 폭을 "직렬에 맞지 않게" 만드는 것입니다.다음 사항을 기억해 두면 도움이 됩니다.

• offsetHeight는 테두리, 패딩 및 요소의 수평 스크롤 바를 포함한 요소의 CSS 높이 픽셀 단위입니다.

한편, 클라이언트는높이는 Offset Height와 반대라고 할 수 있습니다.테두리나 여백은 포함되지 않습니다.HTML 컨테이너 내부에 존재하기 때문에 여백이나 테두리 등의 추가 측정으로 계산되지 않기 때문에 패딩이 포함되어 있습니다.따라서:

• clientHeight 속성은 테두리, 스크롤바 또는 여백을 포함하여 요소의 표시 가능한 높이를 픽셀 단위로 반환합니다.

Scroll Height는 스크롤 가능한 영역이기 때문에 스크롤은 여백이나 테두리를 넘지 않습니다.따라서 Scroll Height에는 여백이나 테두리가 포함되지 않지만 Yeah 패딩에는 포함되어 있습니다.그래서:

• 스크롤 높이 값은 수직 스크롤 막대를 사용하지 않고 뷰포트의 모든 내용을 맞추기 위해 요소에 필요한 최소 높이와 동일합니다.높이는 클라이언트와 같은 방법으로 측정됩니다.높이: 요소의 패딩은 포함되지만 테두리, 여백 또는 수평 스크롤 막대는 포함되지 않습니다.

언급URL : https://stackoverflow.com/questions/22675126/what-is-offsetheight-clientheight-scrollheight