Coder Perfect

How can I get the real width and height of an HTML element?

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