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

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

clientWidth property

Browser support:

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

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

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 clientWidth property is special for the html element. It returns the width of the browser's client area without the vertical scrollbar for any doctype. If no doctype is specified, the clientWidth property of the html element contains different values in the browsers.

Be careful about the clientWidth property of the html element!

In Internet Explorer earlier than version 8, it retrieves the width in physical pixel size, while from version 8, it returns the width in logical pixel size.

What does it mean?
If the browser is not at the normal zoom level (the user has the ability to zoom in or out a web page: CTRL and +, CTRL and -), the clientWidth property works differently from version 8 than in earlier versions.

The width is calculated in the default pixel size in Internet Explorer before version 8 even if the current pixel size in the document is different.
From Internet Explorer 8 and in Firefox, Opera, Google Chrome and Safari, the width is calculated in the current pixel size.

For example, if the zoom level is 200%, the clientWidth property retrieves two times greater values before version 8 than from version 8 for the same client window size.
If you need a cross-browser solution to get the size of the browser window, see Example 3 below.

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.clientWidth;

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

This property is read-only.

Note that the clientWidth property does not work for HTML elements whose display type is inline. There are several HTML elements (inline HTML elements), whose display type is inline by default (such as: a, span, b, img etc.). If you need to use the clientWidth property of an inline HTML element, set its display style property to 'block'.

Possible values:

Integer that represents the width of the object.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the clientWidth 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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the clientWidth, clientHeight, scrollWidth, scrollHeight, scrollLeft, scrollTop properties and the onscroll event:

<head>
    <script type="text/javascript">
        function DisplayCurrentScroll () {
            var div = document.getElementById ("scrollDiv");
            var info = document.getElementById ("info");
            info.rows[1].cells[4].innerHTML = div.scrollLeft;
            info.rows[2].cells[4].innerHTML = div.scrollTop;
        }

        function DisplayInfo () {
            var div = document.getElementById ("scrollDiv");
            var info = document.getElementById ("info");
            info.rows[1].cells[1].innerHTML = div.scrollWidth;
            info.rows[2].cells[1].innerHTML = div.scrollHeight;
            info.rows[1].cells[2].innerHTML = div.clientWidth;
            info.rows[2].cells[2].innerHTML = div.clientHeight;
            info.rows[1].cells[3].innerHTML = div.scrollWidth - div.clientWidth;
            info.rows[2].cells[3].innerHTML = div.scrollHeight - div.clientHeight;

            DisplayCurrentScroll ();
        }

        function OnScrollDiv () {
            DisplayCurrentScroll ();
        }
    </script>
</head>
<body onload="DisplayInfo ()">
    <div id="scrollDiv" style="width:200px;height:200px; overflow:auto;" onscroll="OnScrollDiv ()">
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
    </div>
    <br /><br />
    <table id="info" border="1px">
        <thead>
            <tr>
                <th></th>
                <th>Total size</th>
                <th>Client size</th>
                <th>Max scroll position</th>
                <th>Current scroll position</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b>Horizontal</b></td>
                <td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td><b>Vertical</b></td>
                <td></td><td></td><td></td><td></td>
            </tr>
        </tbody>
    </table>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example shows a cross-browser solution to get the size of the browser's client area in the current pixel size of the document. Try to zoom in and out (CTRL and +, CTRL and -) and refresh the page (F5).

<head>
    <script type="text/javascript">
            // always return 1, except at non-default zoom levels in IE before version 8
        function GetZoomFactor () {
            var factor = 1;
            if (document.body.getBoundingClientRect) {
                    // rect is only in physical pixel size in IE before version 8 
                var rect = document.body.getBoundingClientRect ();
                var physicalW = rect.right - rect.left;
                var logicalW = document.body.offsetWidth;

                    // the zoom level is always an integer percent value
                factor = Math.round ((physicalW / logicalW) * 100) / 100;
            }
            return factor;
        }

        function GetWindowSize () {
            var zoomFactor = GetZoomFactor ();
            var w = Math.round (document.documentElement.clientWidth / zoomFactor);
            var h = Math.round (document.documentElement.clientHeight / zoomFactor);

            var info = document.getElementById ("info");
            info.innerHTML = w + "px * " + h + "px";
        }
    </script>
</head>
<body onload="GetWindowSize ()">
    Size of the browser's client area:
    <span id="info" style="margin-left:20px;"></span>
    <div style="width:500px; height:1000px; background-color:#e0a0a0;">Size of this element: 500px * 1000px</div>
</body>