0

I want to get height of an element with JavaScript, but I want the value even if it is applied in a <style> tag, not just inline.

   <style>
     #test{height:100px;}
   </style>
   <div id="test"></div>
   <script>

   alert(document.getElementById("test").style.height);


   <script>

The above alert doesn't show anything because it just gets the inline style, not the entire style. How can I get to access to all the styles of an element?

2

1 Answer 1

0

if you want the full computed styles, use:

window.getComputedStyles(document.querySelector('#test'));

then go for:

window.getComputedStyles(document.querySelector('#test')).height;

This will give you the height in px, even if you specify a percentage height.

Also, you could use:

document.querySelector('#test').clientHeight;

This would include padding, though, depends what you need. Read more:

https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.