如何在原生 JavaScript（无 jQuery）中使用边距、填充、边框获取元素宽度/高度答案

【问题标题】：How to get element width/height with margin, padding, border in Native JavaScript (no jQuery)如何在原生 JavaScript（无 jQuery）中使用边距、填充、边框获取元素宽度/高度
【发布时间】：2014-04-24 12:23:39
【问题描述】：

寻找可靠的方法来计算元素的宽度/高度 + 边距 - 填充 + 边框仅使用原生 JS 并且是 xbrowser (IE8+)

【问题讨论】：

标签： javascript dom

【解决方案1】：

如果您只处理边距、内边距和边框属性的像素值，则可以执行以下操作：

// we're assuming a reference to your element in a variable called 'element'
var style = element.currentStyle || window.getComputedStyle(element),
    width = element.offsetWidth, // or use style.width
    margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight),
    padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight),
    border = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);

alert(width + margin - padding + border);

如果您正在处理其他类型的值（如 em、点或像 auto 这样的值），我想将您推荐给 this answer。

【讨论】：

+1 我喜欢它，因为您已经涵盖了所有要点，尽管您可以在回答中提到 element.getBoundingClientRect 函数。
请记住，您必须在 css 中将宽度声明为 border-left-width 或 border-right-width。它不会从声明为 border-width 或简单地 border 的样式中解析左宽度。
“element.offsetWidth”已经包含了边框的大小，但是在您的最后一个代码行中，您再次总结了边框。您添加了两次边框宽度。也许更好地使用“clientWidth”而不是“offsetWidth”。