HTML DOM offsetWidth Property (original) (raw)

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 `

DOM Style offsetWidth Property

<script>
    function Geeks() {
        let element = document.getElementById("GFG");
        let txt = "Width including padding and border: "
            + element.offsetWidth + "px";
        document.getElementById("demo").innerHTML = txt;
    }
</script>

`

Output:

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

HTML `

DOM Style offsetWidth Property

<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>

`

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