如何在Native JavaScript(无jQuery）中获得带边距、填充和边框的元素宽度/高度

How to get element width/height with margin, padding, border in Native JavaScript (no jQuery)

本文关键字：边框 填充 元素 高度 JavaScript Native jQuery      更新时间：2023-09-26

正在寻找可靠的方法来计算元素的宽度/高度+边距-填充+边界，仅使用本地JS，并成为xbrowser（IE8+）

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

// 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);

如果您正在处理其他类型的值（如ems、点或auto等值），我想让您参考这个答案。

相关文章：