javascript - 从 Javascript 查找 HTML 元素像素尺寸

Question

我正在寻找一种可靠的、跨浏览器的方法来从 Javascript 中找到以下计算的维度:

• 内容矩形:最里面的内容区域
• 客户矩形:内容区域+填充
• 完整的矩形:content + padding + border + margin

不必完全是那种分组，我只是在寻找足够的信息来将任何框完全分解为内容->填充->边框->边距段。

(我可能不必关心滚动条，但如果它们也有明确定义的行为，我不介意知道)

我希望能够以像素 值的形式获取这些值，而不管它们是如何通过 CSS 设置样式的。所以即使在例如的情况下margin-left: auto 或 width: 50%，我希望能够以像素为单位提取计算结果。

请不要使用 jQuery 解决方案，我正在寻找普通的 Javascript + DOM 答案。

Answer 1

执行此操作的 jQuery 方法是调用 .outerWidth() 或 .outerHeight()。在无法使用 jQuery 的情况下，您可以查看 jQuery source看看他们是如何实现这一目标的。

或者，这里有一些答案产生相同的结果。例如:what is the jQuery outerHeight() equivalent in YUI & outerWidth without jquery .

来自后者:

document.getElementById('container').offsetWidth; // "Outer" Width
document.getElementById('container').clientWidth; // "Inner" Width

分别使用 .offsetHeight 和 .clientHeight 作为高度。