如何在原生JavaScript中使用边距,填充,边框获取元素宽度/高度(无jQuery)

Don*_*ska 18 javascript dom

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

TA

小智 31

如果您只处理边距,填充和边框属性的像素值,则可以执行以下操作:

// 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);
Run Code Online (Sandbox Code Playgroud)

如果你正在处理其他类型的价值观(比如ems,积分或价值观auto),我想请你参考这个答案.

  • +1我喜欢它,因为你已经覆盖了所有的点,虽然你可以在你的答案中提到`element.getBoundingClientRect`函数. (5认同)
  • “element.offsetWidth”已经包含边框的大小,但在最后一个代码行中,您再次总结了边框。您添加了两次边框宽度。也许更好地使用“clientWidth”而不是“offsetWidth”。 (2认同)