In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > offsetWidth

offsetWidth property

Browser support:

Returns the width of the visible area for an object, in pixels. The value contains the width with the padding, scrollBar, and the border, but does not include the margin.

The clientWidth property is similar to the offsetWidth property, but it returns the width including only the padding.

If you need the total width of an element's contents, use the scrollWidth property. It returns the width of the contents with the padding, but without the scrollBar, border and the margin. In Opera, the scrollbar is also included.
Another way to get the width of an object is to use the getBoundingClientRect method. It returns the bounding rectangle of the object without the margin.

You can set the width of an element with the width, pixelWidth and posWidth style properties. In that case, the value of the width contains the width of the visible contents with the vertical scrollbar, but without the padding, border and the margin. You can get the value of the width style property in different units with these properties, not the rendered width of the element.

Note that the offsetWidth property is special for the html element. It returns the width of the browser's client area without the vertical scrollbar like the clientWidth property of the html element. Since the offsetHeight property of the html element works differently in the browsers, so use the clientWidth and clientHeight properties of the html element if you need the size of the browser's client area.

If you need the total size of the document, use the scrollWidth and scrollHeight properties of the html element.

Note that the offsetWidth property of the html element retrieves the width in physical pixel size in Internet Explorer earlier than version 8, while from version 8, it returns the width in logical pixel size.
For further details, please see the page for the clientWidth property.

To get the height of the document or an element in the document, use the clientHeight, offsetHeight or the scrollHeight property.
If you need the position of an element, you can use the offsetLeft, offsetTop properties and the getBoundingClientRect method.

Syntax:

object.offsetWidth;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Integer that returns the width, in pixels.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the offsetWidth property:

<head>
    <style>
        #container {
            width: 350px;
            height: 150px;
            margin: 10px;
            border: 2px solid red;
            padding: 15px;
        }
    </style>
    <script type="text/javascript">
        function GetContainerSize () {
            var container = document.getElementById ("container");

            var message = "The height with padding: " + container.clientHeight + "px.\n";
            message += "The height with padding and border: " + container.offsetHeight + "px.\n";

            message += "The width width padding: " + container.clientWidth + "px.\n";
            message += "The width with padding and border: " + container.offsetWidth + "px.\n";

            alert (message);
        }
    </script>
</head>
<body>
    <div id="container">
        The width of this element is 350px<br />
        The height of this element is 150px<br />
        Furthermore, the element has the following style definitions:<br />
        margin: 10px; border: 2px solid red; padding: 15px;
    </div>
    <button onclick="GetContainerSize ();">Get the size of the container!</button>
</body>