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 左右获取填充值。 / p>

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

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

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

2 个答案: