admin管理员组

文章数量:1200988

It was my understanding that [some elem].style.maginTop would return a string with the element's top margin.

Instead, I'm always getting a blank string. I want to use this with the body, but I also tried on a div, and that didn't work either.

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>

It was my understanding that [some elem].style.maginTop would return a string with the element's top margin.

Instead, I'm always getting a blank string. I want to use this with the body, but I also tried on a div, and that didn't work either.

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>

I'm not sure what I'm doing wrong... Does anybody have a non-jQuery solution to this?

  • javascript
  • margin
Share Improve this question asked Dec 26, 2015 at 15:40 PullJoshPullJosh 7357 silver badges21 bronze badges 2
  • Just checking: Do you run your script before or after body? – tcak Commented Dec 26, 2015 at 15:51
  • @tcak I'm currently using codepen, which I believe places the script after the body. Though I could be wrong. – PullJosh Commented Dec 26, 2015 at 15:53
Add a comment  | 

5 Answers 5

Reset to default 16

The HTMLElement.style only returns inline styles:

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

To access the styles from stylesheets use 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>

You can use getComputedStyle and getPropertyValue to get top margin.

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>

Tested and working.

I don't know why, but I got it working by implicitly assigning the margin-top by JS first. I know why my answer works (it's been over 2 years so I better know why). By setting the values of div#test and body to 50px and 100px like this:

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

I'm actually setting the CSS property/value of the elements inline:

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

Whenever the .style property is used, the CSS property/value that follows it is always inline. One important thing to remember about inline CSS styles is that they have a higher priority than the other 2 means of CSS Declaration: external stylesheets (ex. <link href="file.css"...) and inline stylesheet (ex. <style>...</style>). The only way to override an inline style is to use !important (unless of course the inline style has !important as well.)

So if the.style property is used to read a property/value of an element, it'll only return the inline style value if it actually exists which in OP's case it never did and in my case it did because I used .style to assign the property/values. While my solution is correct, the answers by Nicolo and Mr. Karlsson are better since you'll get the values from all CSS stylesheets.

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>

Hm, I tried it as well with the same result as you did. A quick google search turned up Using JavaScript to read html / body tag margin-top which uses style.getPropertyValue() to return the information you're looking for.

instead of using core javascript, let you use js library jQuery. Then use this syntaxt to get its value.:

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

for pure javascript use this 

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

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

本文标签： javascriptdocumentbodystylemarginTop returning blank string in JSStack Overflow

版权声明：本文标题：javascript - document.body.style.marginTop returning blank string in JS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738599928a2102006.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。