0

如果没有为 body 设置 style="margin:[some] px"，为什么document.body.style.margin在 chrome 和 firefox 中什么也不返回。

现在假设我想要offsetParent.offsetLeftdiv的某个子元素使用css属性的body边距。默认情况下它给我0px。那么如果body元素最初是默认的0px边距，那么为什么我的html视觉元素会从左边显示一些边距出来的页面是 8px。

正文边距是否只有 0 px？

HTML：

<div>
    <p>hello</p>
</div>

CSS：

div {
    height:200px;
    width:200px;
    background:green;
    border:2px solid green;
    padding:10px 10px
}

p {
    height:100px;
    width:100px;
    padding:10px 0 0 10px;
    background:yellow
}

演示

4

3 回答 3

2

尝试使用window.getComputedStyle：

window.getComputedStyle(document.body).margin

检查元素以查看额外偏移量可能来自何处。

于 2013-07-08T18:20:41.877 回答
1

从规格：

“如果元素是 HTML 正文元素......返回零并终止此算法。”

body有 8px 的边距，因为这是 Chrome 中的默认值。但它返回 0offsetParent.offsetLeft因为它必须;)

于 2013-07-08T18:48:34.243 回答
0

问题1：

因为style是一个代表元素内联样式的对象。如果您没有设置内联样式，您也无法从中获取值。

问题2

offsetLeft属性与其offsetParent元素有关，元素不一定是body元素。此外，offsetParent可能在不同的浏览器中引用不同的元素，也可能Box Model是不同的，margin或者其他属性可能会或可能不会应用于计算中。

编辑

显然body有一些默认保证金，但似乎很难抓住它。请检查这个小提琴，你会发现body.

小提琴结果的简短摘要：

var elem = document.body;
console.log(window.getComputedStyle(elem, null).getPropertyValue('color')); // rgb(0, 0, 0)
console.log(window.getComputedStyle(elem, null).getPropertyValue('marginBottom')); // null or an empty string, depends on the browser
console.log(window.getComputedStyle(elem, null).marginBottom); // Suprise! 8px

正如您在控制台中看到的那样，margin它是空的。即使您为其分配了值，它也将是空的。这是因为它不是 CSSStyleCollection 的真正成员，margin只是在一行中设置所有属性的快捷方式。同样代表border.

于 2013-07-08T18:38:26.553 回答