Open In App

HTML DOM offsetWidth Property

Improve
Improve
Like Article
Like
Save
Share
Report

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>


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


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