Getting Width & Height of an Element in JavaScript

Summary: in this tutorial, you will learn how to get the current computed dimension of an element, including width and height.

The following picture displays the CSS box model that includes a block element with content, padding, border, and margin:

To get the element’s width and height including the padding and border, you use the offsetWidth and offsetHeight properties of the element:

let box = document.querySelector('.box');
let width = box.offsetWidth;
let height = box.offsetHeight;Code language: JavaScript (javascript)

The following picture illustrates the offsetWidth and offsetHeight of an element:

See the following example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Element</title>
</head>

<body>
    <div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px"></div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;
        console.log({ width, height });
    </script>
</body>

</html>Code language: HTML, XML (xml)

Output:

{width: 122, height: 172}Code language: JavaScript (javascript)

In this example:

The width is 100px
The border is 1px on each side, so 2px for both.
The padding is 10px on each side, so 20px for both.

Therefore, the total width is 122px. Similarly, the total height is 172px.

To get the width & height of an element as a floating point after CSS transformation, you use the getBoundingClientRect() method of the DOM element. For example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Element</title>
</head>

<body>
    <div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px"></div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;
        console.log({ width, height });

        const domRect = box.getBoundingClientRect();
        console.log(domRect);
    </script>
</body>

</html>Code language: HTML, XML (xml)

Output:

{width: 122, height: 172}

DOMRect {x: 7.997685432434082, y: 7.997685432434082, width: 121.95602416992188, height: 171.95602416992188, top: 7.997685432434082, …}Code language: JavaScript (javascript)

clientWidth & clientHeight

To get the element’s width and height that include padding but without the border, you use the clientWidth and clientHeight properties:

let box = document.querySelector('.box');
let width = box.clientWidth;
let height = box.clientHeight;Code language: JavaScript (javascript)

The following picture illustrates the clientWidth and clientHeight of an element:

JavaScript clientWidth and clientHeight png

To get the margin of an element, you use the getComputedStyle() method:

let box = document.querySelector('.box');
let style = getComputedStyle(box);

let marginLeft = parseInt(style.marginLeft);
let marginRight = parseInt(style.marginRight);
let marginTop = parseInt(style.marginTop);
let marginBottom = parseInt(style.marginBottom);Code language: JavaScript (javascript)

To get the border width of an element, you use the property of the style object returned by the getComputedStyle() method:

let box = document.querySelector('.box');
let style = getComputedStyle(box);

let borderTopWidth = parseInt(style.borderTopWidth) || 0;
let borderLeftWidth = parseInt(style.borderLeftWidth) || 0;
let borderBottomWidth = parseInt(style.borderBottomWidth) || 0;
let borderRightWidth = parseInt(style.borderRightWidth) || 0;Code language: JavaScript (javascript)

To get the height and width of the window, you use the following code:

let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;Code language: JavaScript (javascript)

Summary

Use offsetWidth & offsetHeight properties of the DOM element to get its width and height.

Quiz

Was this tutorial helpful ?