<pre class="prettyprint"><code><style> body { margin: 10px } </style> <body> <script> console.log(document.body.style.marginTop); </script> </body> </code></pre> <p>Question:</p> <p>in firefox->console it shows : <code>(an empty string)</code>, why?</p>

<pre class="prettyprint"><code>window.getComputedStyle(document.body).marginTop </code></pre> <p><code>document.body.style</code> returns inline styles</p>

got (an empty string) when trying to get marginTop value in js

Tags:

javascript

<style>
  body { margin: 10px }
</style>
<body>
  <script> 
    console.log(document.body.style.marginTop); 
  </script>
</body>

Question:

in firefox->console it shows : (an empty string), why?

564

asked Jul 01 '13 07:07

user2507818

2 Answers

window.getComputedStyle(document.body).marginTop

document.body.style returns inline styles

151

answered Sep 24 '22 16:09

karaxuna

You can do it like this:

var e = document.getElementsByTagName('body')[0],
style = window.getComputedStyle(e),
marginTop = style.getPropertyValue('margin-top');

console.log(marginTop);

Related question and answer, see here: Using JavaScript to read html / body tag margin-top