Problem
Assume I have a div> that I want to center in the browser window (viewport). To do so, I’ll need to figure out the div> element’s width and height.
What should I do with it? Please give browser compatibility information.
Asked by snortasprocket
Solution #1
The.offsetWidth and.offsetHeight attributes should be used. They are part of the element, not.style.
document.getElementById(‘foo’); var width = document.getElementById(‘foo’); offsetWidth;
Usefulness. getBoundingClientRect() returns dimensions and location of element as floating-point numbers after performing CSS transforms.
> console.log(document.getElementById('id').getBoundingClientRect())
DOMRect {
bottom: 177,
height: 54.7,
left: 278.5,
right: 909.5,
top: 122.3,
width: 631,
x: 278.5,
y: 122.3,
}
Answered by Greg
Solution #2
Take a look at Element, for example. getBoundingClientRect().
This method returns an object with the following width, height, and other helpful values:
{
width: 960,
height: 71,
top: 603,
bottom: 674,
left: 360,
right: 1320
}
For Example:
var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
This, I feel, does not have the problems that. offsetWidth and.offsetHeight are functions that return 0 on occasion (as discussed in the comments here)
Another difference is getBoundingClientRect() may return fractional pixels, where .offsetWidth and .offsetHeight will round to the nearest integer.
IE8 On Internet Explorer 8 and below, getBoundingClientRect does not return height and width.
If you need to support Internet Explorer 8, use.offsetWidth and.offsetHeight:
var height = element.offsetHeight;
var width = element.offsetWidth;
It’s important to note that the Object produced by this method isn’t a regular object. Its properties aren’t enumerable (so Object.keys, for example, doesn’t work right away.)
More information on how to convert a ClientRect / DomRect into a simple Object can be found here:
Reference:
Answered by Zach Lysobey
Solution #3
This response was written in 2008. For most people at the time, the best cross-browser approach was to use jQuery. I’m keeping the answer here for posterity, and it’s an excellent method to accomplish it if you’re using jQuery. If you’re using a different framework or just plain JavaScript, the accepted response is definitely the best option.
You can use one of the main CSS methods, height and width, starting with jQuery 1.2.6. (or outerHeight and outerWidth, as appropriate).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
Answered by tvanfosson
Solution #4
I added a textbox, a button, and a div all with the same css in case it’s useful to anyone:
width:200px;
height:20px;
border:solid 1px #000;
padding:2px;
<input id="t" type="text" />
<input id="b" type="button" />
<div id="d"></div>
I tested it on Chrome, Firefox, and Internet Explorer Edge, with and without jquery, and with and without box-sizing:border-box. Always use the!DOCTYPE html> tag.
The results:
Firefox Chrome IE-Edge
with w/o with w/o with w/o box-sizing
$("#t").width() 194 200 194 200 194 200
$("#b").width() 194 194 194 194 194 194
$("#d").width() 194 200 194 200 194 200
$("#t").outerWidth() 200 206 200 206 200 206
$("#b").outerWidth() 200 200 200 200 200 200
$("#d").outerWidth() 200 206 200 206 200 206
$("#t").innerWidth() 198 204 198 204 198 204
$("#b").innerWidth() 198 198 198 198 198 198
$("#d").innerWidth() 198 204 198 204 198 204
$("#t").css('width') 200px 200px 200px 200px 200px 200px
$("#b").css('width') 200px 200px 200px 200px 200px 200px
$("#d").css('width') 200px 200px 200px 200px 200px 200px
$("#t").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#b").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#d").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#t").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#b").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#d").css('padding-left') 2px 2px 2px 2px 2px 2px
document.getElementById("t").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("b").getBoundingClientRect().width 200 200 200 200 200 200
document.getElementById("d").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("t").offsetWidth 200 206 200 206 200 206
document.getElementById("b").offsetWidth 200 200 200 200 200 200
document.getElementById("d").offsetWidth 200 206 200 206 200 206
Answered by Graham
Solution #5
Determining the dimensions of elements, according to MDN
offsetWidth and offsetWidthWidthWidthWi Returns the “overall amount of space an element occupies, including the visible content’s width, scrollbars (if any), padding, and border.”
“How much space the actual displayed content takes up, including padding but not including the border, margins, or scrollbars,” clientWidth and clientHeight return.
The “true size of the content, independent of how much of it is now displayed” is returned by scrollWidth and scrollHeight.
As a result, it is contingent on whether the measured content is projected to be outside of the present viewable region.
Answered by HarlemSquirrel
Post is based on https://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height