如何使用 javascript 获取 div 元素的高度和宽度的有用值？答案

【问题标题】：How do I get a useful value for height and width of a div element using javascript?如何使用 javascript 获取 div 元素的高度和宽度的有用值？
【发布时间】：2010-03-30 03:09:50
【问题描述】：

我需要能够在任何时间点存储 div 的当前高度和宽度。

目前我正在使用 div.style.height/width 在内联应用样式时效果很好。

问题是这会返回例如 600px 而不是 600。

有没有更好的方法来做到这一点？如果没有，获得 600 的最佳方法是什么？

我更新后的代码如下所示：

var div = document.getElementById('container');
div.scrollLeft = contentdim.cx*scalar - parseInt(div.style.width)/2;
div.scrollTop = contentdim.cy*scalar - parseInt(div.style.height)/2;

这在 FF 中运行良好。出于某种原因，scrollTop 在 Chrome 中搞砸了..

注意：这是一个为 div 调用 onscroll 的函数。

【问题讨论】：

标签： javascript dom html

【解决方案1】：

试试div.offsetHeight || div.clientHeight

【讨论】：

迄今为止最有用但鲜为人知的属性之一。
当我尝试检查 offsetHeight 时，它为空。我是否也将 div 的高度定义为其 offsetHeight？
你检查过你的 div 元素是否正确吗？
是的。我可以使用 div.style.height 就好了。如果这很重要，我也可以检查 div.scrollLeft/Top。
div.offsetHeight || div.clientHeight 可能是您正在寻找的。 offsetHeight 和 clientHeight 不是样式对象的一部分。

【解决方案2】：

parseInt(div.style.height) 比 div.style.height.replace("px","") 更通用

但是 div.style.offsetHeight 可能会更好，因为它不依赖于显式设置的样式（但您必须先渲染 div 才能读取值）

【讨论】：

我认为 parseInt(div.style.height) 是我最好的选择。但是我仍然无法让 offsetHeight 返回 null 以外的任何内容
元素必须是可见的（即不是'display:none'）并且已经渲染
div 将始终可见，但我相信你的第二点是什么搞砸了。查看我编辑的笔记
这对我来说是最好的答案，因为它解决了问题。我仍然遇到的唯一问题是，由于某种原因，Chrome 中的 scrollTop 始终为零。有谁知道这是为什么？

【解决方案3】：

div.style.height.replace("px","")

使用jQuery，更优雅一点，你也可以这样做：http://api.jquery.com/height/

$("div").height() 
//returns just the integer

【讨论】：

所以这是检索高度/宽度的最佳方法？

【解决方案4】：

总结以上内容：

document.getElementById('yourElement').style.height

CSS 高度（如果已在样式表中设置）。不包括 padding、margin 等。如果没有设置，你可能会得到像auto 这样的值。

document.getElementById('yourElement').offsetHeight

在浏览器中呈现的 HTMLElement 的高度，包括填充、滚动条等（此元素高度消耗的总偏移量）。请注意，这通常等同于 clientHeight，但不能保证。

这里是offsetHeight 在 Mozilla 开发者中心的定义。请注意，与clientHeight 有一些区别，即clientHeight 不包括渲染的滚动条； offsetHeight 通常会给你最大值。

【讨论】：

高度确实是我想要的。感谢您的回答，因为它内容丰富且很有帮助。

【解决方案5】：

使用 jQuery：

height()

width()

【讨论】：