Organizational Research By

Surprising Reserch Topic

how do i retrieve an html elements actual width and height

how do i retrieve an html elements actual width and height  using -'javascript,html,xhtml,dhtml'

Suppose that I have a <div> that I wish to center in the browser's display (viewport). To do so, I need to calculate the width and height of the <div> element. What should I use for maximum browser compatibility? Looking for a solution that works on IE6+, FF2+, Opera and Webkit-based browsers (Safari 3+, Google Chrome).

asked Oct 11, 2015 by vijayshukla80
0 votes

Related Hot Questions

3 Answers

0 votes

You should use the .offsetWidth and .offsetHeight properties. Note they belong to the element, not .style.

var width = document.getElementById('foo').offsetWidth;

answered Oct 11, 2015 by shegokar.anjeet
0 votes

As of jQuery 1.2.6 you can use one of the core CSS functions, height and width (or outerHeight and outerWidth, as appropriate).

var height = $("#myDiv").height();
var width = $("#myDiv").width();

var docHeight = $(document).height();
var docWidth = $(document).width();
answered Oct 11, 2015 by amit.gupta
0 votes

You only need to calculate it for IE7 and older (and only if your content doesn't have fixed size). I suggest using HTML conditional comments to limit hack to old IEs that don't support CSS2. For all other browsers use this:


This is the perfect solution. It centers

of any size, and shrink-wraps it to size of its content.

answered Oct 11, 2015 by android_master