Getting the height of a div

问题:

<span style="width:100%" id="learning_menu"><div id="aLM" style="width:100%;height:100%">test | test | test</div></span>

The code above is the current HTML that I have. I'll be making the inner "div" shrink-and-grow using jQuery. I can't figure out how to get the height of the span/div though. I'm not going to set a specific value in CSS because it could change depending on the browser. Because of this, my JavaScript (style.height) always returns 0.

Any ideas?

回答1:

$("#learning_menu").height() will return the span's height

回答2:

Here it is in plain js and no jQuery required:

document.getElementById("learning_menu").offsetHeight;

回答3:

Using jQuery: that would be the .height() method.

var span_height = $('#learning_menu').height(),
    div_height = $('#aLM').height();

N.B. it is invalid HTML to place a block-level element (in this case the <div>) inside of an inline element (the <span>).

回答4:

Hm. I am not sure wither I’ve got your issue right or not but… From pure javascript you can use clientHeight (or offsetHeight) property of the element to get it’s height in pixels. From jquery just use .height() method (wich is actually a browser-agnostic wrapper around clientHeight property).