什么是offsetHeight，clientHeight，scrollHeight？ [英] What is offsetHeight, clientHeight, scrollHeight?

问题描述

想想解释 offsetHeight ， clientHeight 和 scrollHeight 或 offsetWidth ， clientWidth 和 scrollWidth ？

Thought of explaining what is the difference between offsetHeight, clientHeight and scrollHeight or offsetWidth, clientWidth and scrollWidth?

在客户端工作之前，必须先了解这些差异。否则，他们的一半生活将用于修复UI。

One must know this difference before working on the client side. Otherwise half of their life will be spent in fixing the 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>

推荐答案

要知道您必须了解框的差异模型，但基本上是：

To know the difference you have to understand the box model, but basically:

clientHeight ：

返回元素的内部高度，以像素为单位，包括填充，但不横向滚动条高度，边框或边距

offsetHeight ：

是一个测量，包含元素边框，元素垂直填充，元素水平滚动条（如果现在，如果呈现）和元素CSS高度。

is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

scrollHeight ：

元素的内容包含内容不可见的高度由于溢出

is a measurement of the height of an element's content including content not visible on the screen due to overflow

---

我会更容易：

---

I will make it easier:

考虑：

<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&填充（可见或不可见）

_{所有内容+ paddings的高度，尽管元素的高度。}

clientHeight ： VISIBLE内容&填充

_{只有可见的高度：由元素的明确定义的高度限制的内容部分。}

clientHeight: VISIBLE content & padding
_{Only visible height: content portion limited by explicitly defined height of the element.}

offsetHeight ： VISIBLE content&填充 + border + scrollbar

_{文档元素所占用的高度}

这篇关于什么是offsetHeight，clientHeight，scrollHeight？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！