通过 attributes.getNamedItem 获取元素的实际宽度/高度值答案

【问题标题】：Getting actual widh/height values of element via attributes.getNamedItem通过 attributes.getNamedItem 获取元素的实际宽度/高度值
【发布时间】：2011-07-13 04:08:57
【问题描述】：

我正在尝试获取 dom 树（HTML 页面）中元素的宽度/高度值，我正在使用以下方法：

var event = e || window.event; var target = event.target || event.srcElement;

我正在使用

获取 id 和 class 信息

var classinfo = target.attributes.getNamedItem("class").nodeValue; var idinfo = target.attributes.getNamedItem("id").nodeValue;

但你可以猜到，任何元素都不必有 id 和/或类节点，所以我无法检查 width="..px"节点值或 getElementById 方法
因此，有没有办法通过使用 getNamedItem 方法/或您可以建议的任何其他方法来获取节点元素的宽度和高度值。
注意：强> 我需要得到真正的宽度和高度，而不是 css 或内联，因为 css 中的宽度可能是 60%，但它呈现为 100px...
提前致谢。

【问题讨论】：

标签： javascript dom height width

【解决方案1】：

element.offsetWidth, element.offsetHeight：包含框的整体大小，以像素为单位

element.clientHeight, element.clientWidth: 内容尺寸

这些是只读属性，总是返回当前渲染的值。

（您需要在元素或样式表中分配样式属性以设置屏幕上大多数元素的高度和宽度。）

【讨论】：

scrollHeight 是我会考虑的容器内容的高度，我想区别是“内容”的含义。对于我来说，clientHeight 和 offsetHeight 对我来说都是一样的，因为里面有很多 div 和溢出：auto。 scrollTop+clientHeight=scrollHeight（滚动到底部时）。