2

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

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

它不必完全是那个分组，我只是在寻找足够的信息来将任何框完全分解为 content->padding->border->margin 段。

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

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

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

4

2 回答 2

0

这可能会有所帮助：

<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 < 9 的百分比。对于旧版本，您应该将百分比转换为像素（您可以在此处找到更多信息http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 )

于 2013-07-05T15:43:41.830 回答
0

jQuery 的做法是调用 .outerWidth() 或 .outerHeight()。在无法使用 jQuery 的情况下，您可以查看jQuery 源代码以了解它们是如何实现这一点的。

或者，这里有一些答案会产生相同的结果。例如：没有 jquery的 YUI和outerWidth中的 jQuery outerHeight() 等价物是什么。

从后者：

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

使用 .offsetHeight 和 .clientHeight 分别表示高度。

于 2013-02-14T14:12:48.543 回答