11

Firebug tells me the computed style of my_div:

width 300px

height 453.167px

Yet when I execute console.log(mydiv.style.height), it gives me an empty string, even though console.log(mydiv) logs the correct element. I am sure the page has loaded by the time this logging code is called. I'd appreciate a solution that does not use jQuery.

Rose Perrone
  • 61,572
  • 58
  • 208
  • 243
  • Possible duplicate of [How do you get the rendered height of an element?](https://stackoverflow.com/questions/526347/how-do-you-get-the-rendered-height-of-an-element) – Penny Liu Aug 06 '19 at 15:02

2 Answers2

24

Depending on the browser of choice, one of these will do:

mydiv.offsetHeight
mydiv.clientHeight

Get full height of a clipped DIV

Getting the height of a div

Community
  • 1
  • 1
josh.trow
  • 4,861
  • 20
  • 31
  • Thanks! They both work. Do you know why mydiv.style.height doesn't work? – Rose Perrone May 25 '12 at 01:04
  • 2
    @RosePerrone `element.style.height` only returns the inline style, which means that if you don't specify the style in the element's tag (i.e `
    `), the `style` property will return an empty string for any property.     – rdleal May 25 '12 at 01:14
  • 1
    @rosePerrone `style.height` is just the value of the CSS style property. Since you set no height this is blank. – Hawken May 25 '12 at 01:17
  • Why doesn't the style property return the computed style, rather than returning only the value of CSS rules that the programmer has specified? – Rose Perrone May 25 '12 at 01:39
  • 1
    @RosePerrone: Because that's the way the code is written - you could probably find some deep dark corner of the W3C specs that say it, but it is best not to waste your time on minor things like that. – josh.trow May 25 '12 at 02:04
  • @josh.trow thanks, I can see how this way of printing CSS rules would be helpful for debugging--the programmer can always inspect an element to get its computed properties, but if she wants to see only the rules she specifies, she can log it. – Rose Perrone May 25 '12 at 03:09
-3

UPDATE:

Many browser inconsistencies have been fixed since my original answer. Now the clientHeight property of a DOM element is reliable.

var height = element.clientHeight;

The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.

clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).

Note: This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

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

Original answer:

If you use the jQuery JS library, you can just do this:

var computed_height = $('#my_div').height();

If you use the Prototype JS library, it's similar:

var computed_height = $('my_div').getHeight();

Using a library is often the easiest & most cross-browser way to do something. Getting computed styles with vanilla js is unreliable because the properties are different across browsers.

Community
  • 1
  • 1
Alex K
  • 14,893
  • 4
  • 31
  • 32
  • 7
    I'll not vote you down because it is technically valid, but please look and respect the question: `I'd appreciate a solution that does not use jQuery.` – josh.trow May 25 '12 at 01:04
  • But it doesn't say it's a requirement. ;) If you'd like I can post some ways with other libraries. Point is vanilla js is janky for stuff like this because of the different properties in different browsers. It's easier to call 1 method ".height()" than to say if this browser then it's this property, if this browser then it's this property, etc. – Alex K May 25 '12 at 01:14
  • 7
    Oh believe me I too would absolutely use a library, but when the post explicitly asks for non-library methods I find it best to assume they have a reason. – josh.trow May 25 '12 at 01:15