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

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

本文关键字：返回 空白 字符串 JS body style marginTop document      更新时间：2023-09-26

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

相反，我总是得到一个空白字符串。我想在身体上使用它，但我也尝试了一个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解决方案吗？

HTMLElement.style 只返回内联样式：

属性返回一个 CSSStyleDeclaration 对象，该对象表示元素的 style 属性。

要从样式表访问样式，请使用 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>

您可以使用

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>

经过测试并正常工作。

我不知道

为什么，但我通过先通过 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 声明的其他 2 种方式具有更高的优先级：外部样式表(例如 <link href="file.css"... ( 和内联样式表(例如 <style>...</style> (。覆盖内联样式的唯一方法是使用!important(当然，除非内联样式也具有!important(。

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

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

而不是使用核心JavaScript，让你使用js library 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/

相关文章：