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

【问题标题】：document.body.style.marginTop returning blank string in JSdocument.body.style.marginTop 在 JS 中返回空白字符串
【发布时间】：2016-04-01 01:52:15
【问题描述】：

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

相反，我总是得到一个空白字符串。我想在 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>

我不确定我做错了什么...有人对此有非 jQuery 解决方案吗？

【问题讨论】：

只是检查：您是在正文之前还是之后运行脚本？
@tcak 我目前正在使用 codepen，我相信将脚本放在正文之后。虽然我可能是错的。

标签： javascript margin

【解决方案1】：

HTMLElement.style 只返回内联样式：

HTMLElement.style 属性返回一个 CSSStyleDeclaration 对象，该对象代表 元素的样式属性。

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

Window.getComputedStyle() 方法在应用活动样式表后给出元素的所有 CSS 属性的值并解决这些值可能包含的任何基本计算。

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>

【讨论】：

效果很好！谢谢。 :) 知道为什么我最初的尝试不起作用吗？

【解决方案2】：

您可以使用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>

经过测试并且可以正常工作。

【讨论】：

【解决方案3】：

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

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

我实际上是在设置内联元素的 CSS 属性/值：

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

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

因此，如果.style 属性用于读取元素的属性/值，它只会返回实际存在的内联样式值，在 OP 的情况下它从未这样做过，而在我的情况下它确实存在，因为我使用.style 分配属性/值。虽然我的解决方案是正确的，但 Nicolo 和 Mr. Karlsson 的答案更好，因为您将从所有 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>

【讨论】：

【解决方案4】：

嗯，我也试过了，结果和你一样。一个快速的谷歌搜索出现了Using JavaScript to read html / body tag margin-top，它使用 style.getPropertyValue() 来返回你正在寻找的信息。

【讨论】：

【解决方案5】：

代替使用核心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/

【讨论】：

"有人有非 jQuery 解决方案吗？"