Question

为什么document.body.style.margin在chrome和firefox中没有返回任何内容 style =“margin：[some] px”未设置为body。

现在假设我想通过div的某个子元素使用offsetParent.offsetLeft css属性的body的边缘。默认情况下它给我0px。如果body元素最初默认为0px margin，那么为什么我的html visual从页面左侧显示的元素显示为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
}

DEMO

Answer 1

尝试使用window.getComputedStyle：

window.getComputedStyle(document.body).margin

检查元素以查看附加偏移量可能从何处进入。

Answer 2

来自specs：

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

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

Answer 3

<强> Ques1：

因为style是表示元素的内联样式的对象。如果您尚未设置内联样式，则无法从中获取值。

<强> Ques2

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

修改

显然body有一些默认的保证金，但似乎很难抓住它。请检查此fiddle，您会找到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。

html元素的意外边距

3 个答案: