How can I retrieve the height of a div in JQuery?

Question

I am absolutly new in JavaScript and JQuery.

I have a JQuery script that is performed each time the user click on a node of a JSTree :

$("#treeId2").bind("select_node.jstree", function (event, data) {

    // DO SOMETHING

})

In this script I have to retrieve the height of the div having id=treeId2

How can I do this thing in JQuery?

Tnx

Answer 1

var heightInPixels = $('#treeld2').height();

Answer 2

Like this!

$("#treeId2").height();

Or, in line with your question:

$("#treeId2").bind("select_node.jstree", function (event, data) {

    alert($("#treeId2").height());

});

Answer 3

You can do it in some ways, for example:

$('#element').height()           
$('#element').innerHeight()              
$('#element').outerHeight()              
$('#element').outerHeight(true)

Above functions count height element with various combination including - padding - border - margin - extact height of element

See diferences of each usage here

Answer 4

You could do something like

$('#treeId2').on('click', function(){
 var height = $(this).height();
 //other code`
})

Reference (jquery docs are great): http://api.jquery.com/height/

Answer 5

You can use .height() to find an element height, but you should not be using .bind() , its deprecated post jQuery 1.7. You can use .click() :

$("#treeId2").click(function () {
   var height = $(this).height();
});

or you can use .on() :

$("#treeId2").on("click", function () {
   var height = $(this).height();
});

Answer 6

jquery has the .height() method, so using something like:

$("#treeId2").height()

should return what you are looking for.

It is worth noting that this does not take padding, margins, or borders into account.

Source

Answer 7

$("#treeId2").on("click", function () {
  var height = $(this).height();
});