Getting the Width and Height of an Element

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 that include 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: CSS (css)

In this example:

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

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

To get the width & height of an element as 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: CSS (css)

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 the width and height.

PreviousclassList NextWorking with Events

Last updated 2 years ago