javascript - 如何使用 JavaScript 测量 DOM 节点内容区域的尺寸？

Question

我需要计算 DOM 节点的宽度和高度，使其不包括填充、边距和边框宽度，即；内容区域的宽度和高度。目前，我已经尝试过 clientWidth 和 clientHeight 但尺寸与实际的 DOM 节点不相等。计算内容区域尺寸的最佳方法是什么？

Answer 1

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

所以要获得宽度，你可能会这样做elem.clientWidth - elem.paddingLeft - elem.paddingRight。

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

Answer 2

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

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

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 将起作用，否则不起作用！