HTML DOM offsetWidth Property

Last Updated : 15 Jun, 2023

The DOM offsetWidth property is used to return the layout width of an element as an integer. It is measured in pixels. It includes width, border, padding, and vertical scrollbars but not margin. If the element is hidden then it returns 0.

Syntax:

element.offsetWidth

Return Value: It returns the layout width of an element as an integer.

Example 1: In this example, we will use DOM offsetWidth property.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>
        DOM Style offsetWidth Property
    </title>
    <style>
        #GFG {
            height: 150px;
            width: 300px;
            padding: 10px;
            margin: 15px;
            background-color: green;
        }
    </style>
</head>
   
<body>
    <h2>DOM Style offsetWidth Property</h2>
    <div id="GFG">
        <b>Information about this div:</b>
        <p id="demo"></p>
    </div>
    <button type="button" onclick="Geeks()">
        Submit
    </button>
   
    <script>
        function Geeks() {
            let element = document.getElementById("GFG");
            let txt = "Width including padding and border: "
                + element.offsetWidth + "px";
            document.getElementById("demo").innerHTML = txt;
        }
    </script>
</body>
   
</html>

Output:

Example 2: In this example, we will use DOM offsetWidth Property

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        DOM Style offsetWidth Property
    </title>
    <style>
        #GFG {
            height: 150px;
            width: 300px;
            padding: 10px;
            margin: 15px;
            background-color: green;
        }
    </style>
</head>
   
<body>
    <h2>DOM Style offsetWidth Property</h2>
    <div id="GFG">
        <b>Information about this div:</b>
        <br>
        <p id="demo"></p>
    </div>
    <button type="button" onclick="Geeks()">
        Submit
    </button>
   
    <script>
        function Geeks() {
            let element = document.getElementById("GFG");
            let txt = "";
            txt += "Width with padding: "
                + element.clientWidth + "px<br>";
 
            txt += "Width with padding and border: "
                + element.offsetWidth + "px";
            document.getElementById("demo").innerHTML = txt;
        }
    </script>
</body>
 
</html>