Use javascript to find css auto height value

Question

How can I use JavaScript to find out what is the value generated for auto height in css? I am using Grails and jQuery.

Example css:

.tool-preview {
    height: auto;
}

Answer 1

Depending on what portion of the .tool-preview you want to get the height about, you could use appropriate jQuery methods to get it.

Example : innerHeight()[http://api.jquery.com/innerheight/]

Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element.

Other methods and what they do...

http://www.texelate.co.uk/blog/post/91-jquery-whats-the-difference-between-height-innerheight-and-outerheight/

Answer 2

Get parent's height.

var toolPreview = document.getElementsByClassName('tool-preview')[0];
var height = toolPreview.parentNode.offsetHeight;

this solution also works for cascading "auto"s

<div class="has-height">
  <div class="auto">
    <div class="auto">
      <div id="whats-my-height" class="auto">
      </div>
    </div>
  </div>
</div>

here's a fiddle: https://jsfiddle.net/warkentien2/sodu6hut/3/