计算div的高度

Question

I have a div with a set height.

<div class="foo" style="height:100px;">bar</div>

Is it possible to find what the div's height would be if the height was not explicitly set by my style property?

In other words, I'd like to find the height of the following div without actually changing the div.

<div class="foo">bar</div>

Answer 1

var clone = $('.foo').clone();
clone.css('height', 'auto');
clone.css('visibility', 'hidden');

$('body').append(clone);

console.log(clone.height());

Answer 2

Use the clientHeight property to get the inner height of the element. clientHeight is equivalent to the css height property. See the snippet below (the first line demonstrates the use of clientHeight ):

 var height = document.getElementsByClassName('foo')[0].clientHeight; document.getElementById('heightOfFoo').innerHTML = height; 

 <div class="foo">bar</div> <div id="heightOfFoo"></div> 

Answer 3

如果您使用的是jQuery，则可以使用$（'。target-class'）。height（）来获取高度。