JavaScript: 4 ways to get the width and height of an element

How to get the width and height of an HTML element using plain (vanilla) JavaScript.

Vanilla JavaScript has long allowed for cross-browser retrieval of HTML element sizes without the use of third-party libraries like jQuery. Not everyone takes advantage of this feature, possibly because a block can have several sizes (with padding and without it), and it is not always clear how and which size to get and where to use which. Let's figure out how to get the width and height of an element using built-in JS methods in the browser and how they differ from each other.

Contents:

CSS Box Model

What is the Box Model and how does it affect the sizes of an element (width and height).

An HTML element can be represented as a box, which consists of four areas (parts):

CSS Box Model
  • margin - outer margin - empty space around the element.
  • border - border - around the content.
  • padding - inner margin - empty space around the content.
  • content - text and other elements.

box-sizing

What height and width will be depends on the CSS property box-sizing:

  • box-sizing: content-box - the size of the box is measured relative to the content.
    This means it tells the browser that the sizes specified in width and height refer only to the content. Padding and border are not included in the specified width and height and are added additionally, making the size of the entire element larger than specified in width and height.

  • box-sizing: border-box - the size of the box is measured relative to the border.
    This means it tells the browser that the specified sizes for width and height include everything: content, padding, and border.

By default, browsers use box-sizing: content-box.

How to get the width and height of an element in JS?

There are at least four options here. Each has its own features and will fit depending on which size you need. Let's consider each.

offsetHeight and offsetWidth

Contain the height and width of the element, including padding and border. The returned value is an integer and is read-only.

const element = document.querySelector( '.element' );

// int value of width: content + padding + border.
element.offsetWidth; // 110

// int value of height: content + padding + border.
element.offsetHeight; // 60

Values are rounded to an integer (not float).

clientHeight and clientWidth

Contain the height and width of the element, including padding, but excluding border. The returned value is an integer and is read-only.

const element = document.querySelector( '.element' );

// int value of width: content + padding (without border).
element.clientWidth;  // 100

// int value of height: content + padding (without border).
element.clientHeight; // 50

Values are rounded to an integer (not float).

Method getBoundingClientRect()

The method getBoundingClientRect() returns an object containing all sizes of the element and its position sizes relative to the viewport.

IMPORTANT: width and height of the getBoundingClientRect() method will return a value based on the CSS box-sizing property of the element. For example, with box-sizing: border-box width and height will include padding and border.

height bottom x left y width right Introduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at top 
const element = document.querySelector( '.element' );
const rect = element.getBoundingClientRect()

rect.width    // 945.59
rect.height   // 48.62

rect.right    // 1162.79
rect.bottom   // 132.44

rect.top      // 83.82
rect.y        // 83.82

rect.left     // 217.19
rect.x        // 217.19

Method window.getComputedStyle()

The global method getComputedStyle() returns an object containing the values of all computed CSS properties of the element at that moment. Each CSS value is accessible through the same-named property and has a string type.

IMPORTANT: width and height properties of the getComputedStyle() object contain values based on the box-sizing property of the element. For example, with box-sizing: border-box width and height will include padding and border.

const element = document.querySelector( '.element' );

// string value of width content in px
getComputedStyle( element ).width; // 945.597px

// string value of height content in px
getComputedStyle( element ).height; // 501.597px

To get an integer, simply wrap the result in parseInt() or parseFloat():

parseInt( getComputedStyle( element ).height );   // 501
parseFloat( getComputedStyle( element ).height ); // 501.597

--

See also: https://nikitahl.com/4-ways-to-get-the-width-and-height-of-an-element-with-vanilla-javascript