如何测量DOM节点的维度'的JavaScript内容区

How do I measure the dimensions of a DOM node's content area with JavaScript?

本文关键字：JavaScript 容区 测量 节点 DOM 何测量      更新时间：2023-09-26

我需要计算DOM节点的宽度和高度，使其不包括Padding、Margin和Border宽度，即；内容区域的宽度和高度。目前，我已经尝试了clientWidth和clientHeight，但维度与实际的DOM节点不相等。计算内容区域维度的最佳方法是什么？

clientWidth和clientHeight是最好的方法，但您需要减去填充。

所以为了得到宽度，你可以做elem.clientWidth - elem.paddingLeft - elem.paddingRight。

以下是一些关于确定尺寸的文档：https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements

从计算的角度来看，@jordan所说的从clientWidth中消除左填充和右填充将给出内容区域的实际大小。但问题是，如果样式是通过外部样式表设置的，则无法通过elem.style.paddingLeft和elem.style.paddingRight获取padding left和right的值。

以下是在读取外部样式表后，获取浏览器在节点上应用的填充实际值的方法：

var node = document.getElementById("nodeid");
alert("Padding Left before computed style: " + node.style.paddingLeft);
var st = window.getComputedStyle(node);
alert("Padding Left after computed style: " + st.paddingLeft);

注意：如果节点样式使用style属性，则elem.style.paddingLeft将不起作用！

相关文章：