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

Question

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

Answer 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

这样的值），我想推荐您参考这个答案。

Answer 2

一个不太繁琐的方法是使用@Mehran Hatami提到的

element.getBoundingClientRect

。

这是您需要的代码，来自 MDN 文档：

let elem = document.querySelector("<element>");
let rect = elem.getBoundingClientRect();
if(rect){
  const { width, height } = rect;
  console.log( width, height )
}