How to get width of element in JavaScript? [SOLVED]


Written By - Olorunfemi Akinlua
Advertisement

Introduction

In web development, JavaScript is the go-to language to interact, manipulate or work with HTML elements or more broadly, the Document Object Model (DOM) that determines how things are displayed on the web.

Built-in functions can achieve different actions for DOM; from updating DOM properties to deleting them. In this article, we will discuss how to get the width of an element in JavaScript using JavaScript method properties.

 

Method-1: Use offsetWidth property

We can get the width of an element in JavaScript by using the offsetWidth property. This property returns the width of an element, including padding and borders, in pixels.

Let’s illustrate how to obtain this property value based on the HTML code below

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            /* CSS Styling */
            #para {
                width: 50px;
                padding: 10px;
                border: 5px solid black;
                margin: 20px;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <p id="para">This is a paragraph</p>
        </div>
    </body>
    <script>
        // JavaScript Code to get width of element
        const element = document.getElementById("para");
        let width = element.offsetWidth;

        alert(`The width of the paragraph element is ${width}`);
    </script>
</html>

Output

How to get width of element in JavaScript? [SOLVED]

 

This value contains the width of the element, including the padding and border value where the width is 50px, the padding is 20px (10px right + 10px left), and the border is 10px (5px right + 5px left).

 

Method-2: Use clientWidth property

Another property we can make use of is the clientWidth property. This property returns the width of an element including padding but excluding borders, margins, and scroll values.

Let’s use it on the same HTML code as in the section above.

Advertisement
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            /* CSS Styling */
            #para {
                width: 50px;
                padding: 10px;
                border: 5px solid black;
                margin: 20px;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <p id="para">This is a paragraph</p>
        </div>
    </body>
    <script>
        // JavaScript Code to get width of element
        const element = document.getElementById("para");
        let width = element.clientWidth;

        alert(`The width of the paragraph element is ${width}`);
    </script>
</html>

Output

width of the paragraph element is 70

This value contains the width of the element and the padding value where the width is 50px and the padding is 20px (10px right + 10px left).

 

Method-3: Use getComputedStyle() method

We could use a global JavaScript method to obtain the value of all CSS properties of an element. This method is called the getComputedStyle() method, where we can access the width property to get the element's width. It returns the value in pixels and with the px string, which means it's a string. We can get the integer value by parsing the value to the parseInt() method.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            /* CSS Styling */
            #para {
                width: 50px;
                padding: 10px;
                border: 5px;
                margin: 20px;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <p id="para">This is a paragraph</p>
        </div>
    </body>
    <script>
        // JavaScript Code to get width of element
        const element = document.getElementById("para");
        let width = window.getComputedStyle(element).width;

        let parsedWidth = parseInt(width);

        alert(
            `The width of the paragraph element is ${width} and ${parsedWidth}`
        );
    </script>
</html>

Output

width of the paragraph element is 50px and 50

This value contains only the width of the element.

 

Method-4: Use getBoundingClientRect method

The getBoundingClientRect method returns a DOMRect object which includes values and information about the element’s size and relative position to the viewport. The width of the element can be obtained using the width property which includes the padding and border value.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            /* CSS Styling */
            #para {
                width: 50px;
                padding: 10px;
                border: 5px;
                margin: 20px;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <p id="para">This is a paragraph</p>
        </div>
    </body>
    <script>
        // JavaScript Code to get width of element
        const element = document.getElementById("para");
        let width = element.getBoundingClientRect().width;

        alert(`The width of the paragraph element is ${width}`);
    </script>
</html>

Output

width of the paragraph element is 80

This value contains the width of the element, including the padding and border value where the width is 50px, the padding is 20px (10px right + 10px left), and the border is 10px (5px right + 5px left).

 

Summary

To obtain the width of an element in JavaScript, you can make use of different built-in methods and properties, from the getComputedStyle method to the offsetWidth property. All return different width values depending on what the methods or properties include to determine the elements' width. You can check out more information in the references section.

 

References

HTMLElement.offsetWidth - Web APIs | MDN (mozilla.org)
Element.clientWidth - Web APIs | MDN (mozilla.org)
Window.getComputedStyle() - Web APIs | MDN (mozilla.org)
Element.getBoundingClientRect() - Web APIs | MDN (mozilla.org)

 

Didn't find what you were looking for? Perform a quick search across GoLinuxCloud

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

Buy GoLinuxCloud a Coffee

For any other feedbacks or questions you can either use the comments section or contact me form.

Thank You for your support!!

Leave a Comment