Open In App

How to find the width of a div using vanilla JavaScript?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

To measure the width of a div element we will utilize the offsetWidth property of JavaScript. This property of JavaScript returns an integer representing the layout width of an element and is measured in pixels.

Below are the different approaches to finding the width of a div using vanilla JavaScript:

Approach 1: Using offsetWidth

The DOM offsetWidth property is used to return the layout width of an element as an integer.

Example 1: The following program will illustrate the solution using offsetWidth

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Check Width</title>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #GFG {
            height: 30px;
            width: 300px;
            padding: 10px;
            margin: 15px;
            background-color: green;
        }
 
        #checkButton {
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
 
    <div id="GFG">
        <b>Division</b>
    </div>
 
    <button id="checkButton" onclick="checkWidth()">
          Check Width
      </button>
 
    <script>
        function checkWidth() {
            const elemWidth = document.getElementById("GFG").offsetWidth;
            alert("Width of the div: " + elemWidth + " pixels");
        }
    </script>
 
</body>
 
</html>


Output:

width3

Approach 2: Using  clientWidth() 

The DOM clientWidth Property is used to return the viewable width of a specific element including padding but excluding the measurement of margin, border, and scrollbar width.

Example: In this example, we are using  clientWidth() .

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Check Width</title>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #GFG {
            height: 30px;
            width: 300px;
            padding: 10px;
            margin: 15px;
            background-color: green;
        }
 
        #checkButton {
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
 
    <div id="GFG">
        <b>Division</b>
    </div>
 
    <button id="checkButton" onclick="checkWidth()">
          Check Width
      </button>
 
    <script>
        function checkWidth() {
            const elemWidth = document.getElementById("GFG").clientWidth;
            alert("Width of the div: " + elemWidth + " pixels");
        }
    </script>
 
</body>
 
</html>


Output:

width3

Approach 3: Using getComputedStyle()

The getComputedStyle() method is used to get all the computed CSS property and values of the specified element. The use of computed style is displaying the element after stylings from multiple sources have been applied. The getComputedStyle() method returns a CSSStyleDeclaration object. 

Example: In this example, we are using getComputedStyle() method.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Check Width (getComputedStyle)</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        #myDiv {
            width: 200px;
            height: 100px;
            background-color: #007BFF;
            margin-bottom: 10px;
        }
 
        #checkButtonComputed {
            margin: 10px;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
 
    <div id="myDiv"></div>
    <button id="checkButtonComputed">
          Check Width (getComputedStyle)
      </button>
 
    <script>
        const myDiv = document.getElementById("myDiv");
        const checkButtonComputed =
              document.getElementById("checkButtonComputed");
 
        checkButtonComputed.addEventListener("click", () => {
            const computedStyle = window.getComputedStyle(myDiv);
            const width = computedStyle.getPropertyValue("width");
            alert("Width using getComputedStyle: " + width);
        });
    </script>
 
</body>
 
</html>


Output:

width1

Approach 4: Using getBoundingClientRect()

The HTML DOM getBoundingClientRect() Method returns the relative positioning to the viewport. It returns 8 properties: left, top, right, bottom, x, y, width, and height. Scrolling will change the position value. 

Example: In this example, we are using getBoundingClientReact().

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Check Width (getBoundingClientRect)</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        #myDiv {
            width: 200px;
            height: 100px;
            background-color: #007BFF;
            margin-bottom: 10px;
        }
 
        #checkButtonBounding {
            margin: 10px;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
 
    <div id="myDiv"></div>
    <button id="checkButtonBounding">
        Check Width (getBoundingClientRect)
    </button>
 
    <script>
        const myDiv = document.getElementById("myDiv");
        const checkButtonBounding =
            document.getElementById("checkButtonBounding");
 
        checkButtonBounding.addEventListener("click", () => {
            const rect = myDiv.getBoundingClientRect();
            const width = rect.width;
            alert("Width using getBoundingClientRect: " + width);
        });
    </script>
 
</body>
 
</html>


Output:

width2

Note: clientWidth returns the inner width which includes padding but excludes borders and scroll bars whereas offsetWidth returns the outer width which includes padding and borders.



Last Updated : 29 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads