Question

据我所知，[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解决方案吗？

Answer 1

HTMLElement.style仅返回内联样式：

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

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

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

＆＃13;
＆＃13;
var elem = document.getElementById("testDiv"); var style = window.getComputedStyle(elem); //output document.body.innerHTML = style.marginTop;
＆＃13;
body { margin-top:100px; } #testDiv { margin-top:50px; }
＆＃13;
hi! <div id="testDiv">test</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

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

＆＃13;

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"));

＆＃13;

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

＆＃13;

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

＆＃13;

经过测试和工作。

Answer 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样式表中获取值。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

<IfModule mod_rewrite.c>
  Options +FollowSymLinks -MultiViews
  RewriteEngine On
  RewriteBase /

  # Add trailing slash to url
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/|#(.*))$
  RewriteRule ^(.+)$ $1/ [R=301,L]

  # Remove .php-extension from url
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{DOCUMENT_ROOT}/$1\.php -f
  RewriteRule ^(.+)/$ $1.php [L]

  RewriteRule ^viewprofile/([0-9]+)/?$ viewprofile.php?user_id=$1 [L]
  RewriteRule ^viewprofile/([A-Za-z0-9]+)/?$ viewprofile.php?username=$1 [L]
</IfModule>

纯JavaScript使用此

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

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

Answer 5

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

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

5 个答案: