- mongodb - 在 MongoDB mapreduce 中,如何展平值对象?
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗?
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
想解释一下offsetHeight
、clientHeight
和scrollHeight
或offsetWidth
、有什么区别clientWidth
和 scrollWidth
?
在客户端工作之前,必须知道这种差异。否则他们一半的生命将花在修复 UI 上。
Fiddle , 或内联:
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>
最佳答案
要知道区别,您必须了解 box model ,但基本上:
returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin
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.
is a measurement of the height of an element's content including content not visible on the screen due to overflow
我会让事情变得更容易:
考虑:
<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:整个内容和填充(可见或不可见)
所有内容的高度+填充,尽管元素的高度。
clientHeight:可见的内容和填充
仅可见高度:内容部分受明确定义的元素高度限制。
offsetHeight:VISIBLE content & padding
+边框+滚动条
元素在文档中所占的高度。
关于javascript - 什么是 offsetHeight、clientHeight、scrollHeight?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22675126/
document.documentElement.clientHeight 和 document.body.clientHeight 有什么区别?返回值在所有 Web 浏览器中是否一致,或者每个浏览器
console.log(document.body.clientHeight); 主要问题是我正在尝试调整图像大小以适应浏览器更改为的任何大小。因此,使用 .clientHeight 属性我可以检测大
我正在使用 JavaScript 动态创建 DOM 元素。我需要获得一个 div 的高度来做下滑动画。但是当我使用 clientHeight 时,它总是返回 0。offsetHeight 也做同样的事
我目前正在尝试修改“滑入” 的 Javascript 函数。脚本本身要求您定义 div 的高度,因此它在动态填充的 中几乎没有用。我在 javascript 的 clientHeight 属性上找到了
我想在 style.display='none;' 时获取 DIV 元素(用于在光标位置显示弹出菜单)的尺寸,但是 DIV 的尺寸总是返回 0。我似乎能够获得尺寸的唯一方法是使 DIV style.d
我的 Delphi 程序可以正常构建和编译,但是一旦在 Debug模式下运行,我就会收到以下错误; Property ClientHeight does Not Exist 查看所有 .DFM 文件源
我不得不创建一个快速但肮脏的展开/折叠功能来复制不需要使用 jQuery 的现有行为,因为现有方法使用 jQuery 并且存在一些需要大量调试才能解决的冲突。 最初我决定使用纯 CSS,但想不出一种方
渲染的 DOM 树是 {Logo}
我正在尝试使用 javascript 获取 div 的高度。我在 stackoverflow 上看到了很多这个问题,并且看到了两个答案。有人说是 clientHeight,有人说是 offsetHei
我有一个在 firefox 中工作的函数: function widthimg() { var wheight = document.getElementById('recent
属性 document.body.clientHeight 和 document.body.clientWidth 在 IE7、IE8 和 Firefox 上返回不同的值: IE 8: documen
我想要一种在多个浏览器之间获取可用窗口大小的方法,无需使用 jQuery/Mootools/任何第三方库依赖项。我对此做了一些研究,但我遇到的一半事情都在谈论 Netscape Navigator..
这两个是同一个东西吗? 因为它们似乎从我的测试中返回相同的值。 我正在尝试优化一些代码以使用 native js 属性... 最佳答案 .height()不包括内边距、边距或边框。 clientHei
我正在尝试获取 svg 元素的 clientWidth 和 clientHeight。基于本教程https://bl.ocks.org/curran/3a68b0c81991e2e94b19 ,我对我
我正在学习 JavaScript 并创建了一个倒数计时器 HTML 页面,其中 javascript 代码似乎返回错误 clientHeight的 body 。我想显示我的倒计时 HTML 即使重新调
我已将我的浏览器(FF 和 Chrome)最大化。 document.body.clientHeight 报告 128。这似乎太小了。可视区域至少为960px,我用屏幕尺测量的。我没有使用 iFram
我试图在滚动页面时获取客户端高度: @HostListener('window:scroll', ['$event']) onScrollEvent($event) { if ($event.s
在 javascript 函数中,我使用 document.body.clientHeight 来获取正文的高度。现在,根据 IE8 所处的模式(即怪癖或标准),该值会有所不同。 例子奇怪的是,doc
我尝试通过此代码检查属性 clientHeight: document.documentElement != null && document.documentElement.hasOwnProper
我有一段 JS 代码,判断是否有垂直滚动条,并将 CSS 类应用于元素。没什么大不了的。令我困惑的是,它似乎在做与我理解它应该做的相反的事情。这不是问题,除非它是一个错误并且在未来被修复。 代码: i
我是一名优秀的程序员,十分优秀!