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?

GentlePurpleRain
  • 529
  • 1
  • 5
  • 24
user3781284
  • 61
  • 3

1 Answers1

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

Kilo9
  • 26
  • 2