CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Steven Wexler
Steven Wexler

Reputation: 17269

Calculate height of div

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>

Upvotes: 2

Views: 471

Answers (3)

AmmarCSE
AmmarCSE

Reputation: 30557

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

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

console.log(clone.height());

Upvotes: 4

boombox
boombox

Reputation: 2456

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>

Upvotes: 1

robert_hamm
robert_hamm

Reputation: 176

If you are using jquery you can just grab the height with $('.target-class').height()

Upvotes: -1

Related Questions