HTML DOM offsetWidth Property

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="Beginner()">
        Submit
    </button>
   
    <script>
        function Beginner() {
            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="Beginner()">
        Submit
    </button>
   
    <script>
        function Beginner() {
            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>

Output:

Supported Browsers: The browser supported by DOM offsetWidth property are listed below:

Google Chrome 1 and above
Edge 12 and above
Internet Explorer 5.5 and above
Firefox 1 and above
Opera 8 and above
Safari 3 and above

HTML

HTML

Contact Us