Question

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

内容矩形：最里面的内容区域
客户端矩形：内容区域+填充
完整矩形：内容+填充+边框+边距

它不一定要完全分组，我只是在寻找足够的信息来将任何方框完全分解为内容 - ＆gt; padding-＆gt; border-＆gt;边距段。

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

我希望能够将这些值作为 pixel 值获取，无论它们是如何从CSS设置样式的。因此，即使在例如margin-left: auto或width: 50%，我希望能够以像素为单位提取计算结果。

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

Answer 1

jQuery的做法是调用.outerWidth（）或.outerHeight（）。由于无法使用jQuery，您可以查看jQuery source以了解它们是如何实现此目的的。

或者，这里有一些答案可以产生相同的结果。例如：what is the jQuery outerHeight() equivalent in YUI＆amp; outerWidth without jquery

来自后者：

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

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

Answer 2

这可能有所帮助：

<style>
  body { 
    margin: 10%;
    padding:10px 0 0;
    border:1px solid #000;
  }
</style>

var elem = document.body;

var computedStyle = window.getComputedStyle ? getComputedStyle(elem, '') : elem.currentStyle;

var marginTop = computedStyle.marginTop;
var borderTop = computedStyle.borderTopWidth;
var paddingTop = computedStyle.paddingTop;
console.log(marginTop);
console.log(borderTop);
console.log(paddingTop);

//对我来说返回168px，1px，10px

但它返回IE的百分比＆lt; 9.对于旧版本，您应该将百分比转换为像素（您可以在此处找到更多http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291）

从Javascript中查找HTML元素像素尺寸

2 个答案: