I have a div :

css

    div { width: 200px; height:auto }

markup

   <div contenteditable="true"> Text is editable </div>

Now what should i do to access the height ( numeric value ) of the above div in javascript ? I tried

$('div').height() & $('div').css("height"); both returns auto.

I have a div :

css

    div { width: 200px; height:auto }

markup

   <div contenteditable="true"> Text is editable </div>

Now what should i do to access the height ( numeric value ) of the above div in javascript ? I tried

$('div').height() & $('div').css("height"); both returns auto.

• javascript
• jquery

• 3 Both work fine jsfiddle/sySFk – Musa Commented Jul 16, 2012 at 8:06

4 Answers 4

You may want to try .innerHeight() or .outerHeight(), depending on what you want.

try using

$('div').innerHeight()

or

$('div').outerHeight()

Try This

var divs = document.getElementsByTagName('div');
if(divs.length>0)
     divs[0].offsetHeight;

For returning the NUMERIC height value :

document.getElementsById('myElementId').offsetHeight; // Without jQuery

$('#myElementId').outerHeight(); // With jQuery 

Note 1: outerHeight(true) returns the size with margin and padding inclued, more informations on http://api.jquery./outerHeight/

Note 2 : innerHeight() returns the current puted height for the first element in the set of matched elements, including padding but not border.

Note 3: $('div').height() or $('div').css("height") returns the css value only.