Using Javascript or HTML, how to get the height and width of a div or other element?

Question

I\'ve been trying for a while now to \'get\' the height and width of a div on my webpage. I\'ve tried many things, some are:

document.getElementById(\"header\").         


        

Answer 1

to get height use

document.getElementById("header").offsetHeight

and for width use

document.getElementById("header").offsetWidth;

Answer 2

example -

var divheight = document.getElementById('divId').offsetHeight;

refer this -

http://www.w3schools.com/jsref/dom_obj_all.asp

Answer 3

You should think about getting jQuery, as then you can just this and more very easily:

$("#header").width(); // Gets the width;
$("#header").width(50); // Set width to 50;
$("#header").height(); // Gets the height;
$("#header").height(50); // Set height to 50;

It'll make your life a lot easier in the long run too. Writing with native Javascript can be cumbersome as it requires more code and lots of cross browser testing.

Answer 4

if you don't use jQuery try this:

document.getElementById('someDiv').clientHeight;
document.getElementById('someDiv').offsetHeight;
document.getElementById('someDiv').scrollHeight;

Depend what you need.