document.body.style.marginTop 在 JS 中返回空白字符串

Question

据我了解，[some elem].style.maginTop 会 return 带有元素上边距的字符串。

相反，我总是得到一个空字符串。我想将它与 body 一起使用，但我也尝试了 div，但也没有用。

console.log(document.body.style.marginTop); // logs ""
console.log(typeof(document.body.style.marginTop)); // logs "String"

var elem = document.getElementById("testDiv");
console.log(elem.style.marginTop); // logs ""

body {
    margin-top:100px;
}
#testDiv {
    margin-top:50px;
}

hi!

<div id="testDiv">test</div>

我不确定我做错了什么...body 有non-jQuery 解决方案吗？

Answer 1

HTMLElement.style 仅 returns 行内样式：

The HTMLElement.style property returns a CSSStyleDeclaration object that represents the element's style attribute.

要从样式表访问样式，请使用 Window.getComputedStyle(element):

The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.

var elem = document.getElementById("testDiv");
var style = window.getComputedStyle(elem);

//output
document.body.innerHTML = style.marginTop;

body {
    margin-top:100px;
}
#testDiv {
    margin-top:50px;
}

hi!

<div id="testDiv">test</div>

Answer 2

不用核心javascript，让你用js库jQuery。然后使用此语法获取其值。:

console.log($('body').css('margin-top'));

纯 javascript 使用此

var element = document.body,
    style = window.getComputedStyle(element),
    margin_top = style.getPropertyValue('margin-top');
        console.log(margin_top);

http://jsfiddle.net/hAw53/726/

Answer 3

嗯，我也试了一下，结果和你一样。快速 google 搜索出现 Using JavaScript to read html / body tag margin-top，它使用 style.getPropertyValue() 来 return 您要查找的信息。

Answer 4

您可以使用 getComputedStyle 和 getPropertyValue 来获得最高保证金。

console.log(document.body.style.marginTop); // logs ""
console.log(typeof(document.body.style.marginTop)); // logs "String"

var elem = document.getElementById("testDiv");
//console.log(elem.style.marginTop); // logs ""
console.log(getComputedStyle(elem).getPropertyValue("margin-top"));
alert(getComputedStyle(elem).getPropertyValue("margin-top"));

body {
    margin-top:100px;
}
#testDiv {
    margin-top:50px;
}

hi!

<div id="testDiv">test</div>

已测试并正常工作。

Answer 5

~~我不知道为什么，但我通过首先由 JS 隐式分配 margin-top 来让它工作。~~ 我知道为什么我的答案有效（已经结束2 年，所以我更清楚为什么）。通过将 div#test 和 body 的值设置为 50px 和 100px 像这样：

document.getElementById("testDiv").style.marginTop = '50px';
document.body.style.marginTop = '100px';

我实际上是将元素的 CSS property/value 设置为内联：

<body style='margin-top: 100px'>
  <div id='testDiv' style='margin-top: 50px'>test</div>
</body>

每当使用 .style 属性时，它后面的 CSS property/value 总是内联的。关于内联 CSS 样式要记住的一件重要事情是它们比 CSS 声明的其他两种方式具有更高的优先级：外部样式表（例如 <link href="file.css"...）和内联样式表（例如。 <style>...</style>)。覆盖内联样式的唯一方法是使用 !important（当然除非内联样式也有 !important。）

因此，如果 .style 属性用于读取元素的 property/value，它只会 return 内联样式值（如果它实际存在）在 OP 的情况下它从来没有做过，在我的情况下它做过，因为我使用 .style 来分配 property/values。虽然我的解决方案是正确的，但 and 的答案更好，因为您将从所有 CSS 样式表中获得值。

document.getElementById("testDiv").style.marginTop = '50px';
document.body.style.marginTop = '100px';
console.log(document.getElementById("testDiv").style.marginTop);
console.log(document.body.style.marginTop);

body {
  margin-top: 100px;
}

#testDiv {
  margin-top: 50px;
}

hi!

<div id="testDiv">test</div>

document.body.style.marginTop 在 JS 中返回空白字符串

document.body.style.marginTop returning blank string in JS

javascript

margin