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

问题描述

想解释offsetHeight、clientHeight和scrollHeight或offsetWidth、的区别是什么clientWidth 和 scrollWidth?

在客户端工作之前，必须了解这种差异.否则他们将有一半的时间花在修复 UI 上.

Fiddle，或内嵌如下:

function whatis(propType) {var mainDiv = document.getElementById("MainDIV");如果(window.sampleDiv == null){var div = document.createElement("div");window.sampleDiv = div;}div = window.sampleDiv;var propTypeWidth = propType.toLowerCase() + "Width";var propTypeHeight = propType + "Height";var 计算样式 = window.getComputedStyle(mainDiv, null);var borderLeftWidth = calculateStyle.getPropertyValue("border-left-width");var borderTopWidth = calculateStyle.getPropertyValue("border-top-width");div.style.position = "绝对";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('偏移');}document.getElementById("client").onclick = function() {whatis('客户');}document.getElementById("scroll").onclick = function() {whatis('滚动');}

#MainDIV {边框:5px纯红色；}

offsetHeight &offsetWidth</button><button id="client">clientHeight &clientWidth<button id="scroll">scrollHeight &scrollWidth<div id="MainDIV" style="margin:auto; height:200px; width:400px; overflow:auto;"><div style="height:400px; width:500px; overflow:hidden;">

解决方案

要了解区别，您必须了解 盒模型，但基本上:

clientHeight:

<块引用>

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

offsetHeight:

<块引用>

是一个度量，它包括元素边框、元素垂直填充、元素水平滚动条(如果存在，如果呈现)和元素 CSS 高度.

scrollHeight:

<块引用>

是对元素内容高度的度量包括内容在屏幕上不可见由于溢出

<小时>

我会让事情变得更简单:

考虑:

<元素><!-- *content*: 子节点:-->|内容一个子节点作为文本节点|的<div id="another_child_node"></div>|这...而我是第 4 个子节点 |元素</元素>

scrollHeight:整个内容&填充(可见与否)
_{所有内容的高度+内边距，与元素的高度无关.}

clientHeight:VISIBLE content &填充
_{仅可见高度:内容部分受明确定义的元素高度限制.}

offsetHeight:VISIBLE content &padding + 边框 + 滚动条
_{文档上元素所占的高度.}

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

One must know this difference before working on the client side. Otherwise half of their life will be spent in fixing the UI.

Fiddle, or inline below:

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:

returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin

offsetHeight:

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:

Consider:

<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)
_{Height of all content + paddings, despite of height of the element.}

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

offsetHeight: VISIBLE content & padding + border + scrollbar
_{Height occupied by the element on document.}

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