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

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

clientLeft property

Browser support:

Returns the width of the left border in pixels.

If the vertical scrollbar is rendered and it is on the left side of the element, the clientLeft property returns the width of the left border and plus the width of the scrollbar in Internet Explorer. If the value of the direction property is 'rtl' and the vertical scrollbar needs to be rendered, then the vertical scrollbar will appear on the left side of the element.
Another way to get the width of an element's left border is to use the borderLeftWidth property of the CSSStyleDeclaration and currentStyle objects.
If you need the left position of an element, see the page for the offsetLeft property.
If you need the left position of the browser window, use the screenX or screenLeft property.

Syntax:

object.clientLeft;

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

This property is read-only.

Note that the clientLeft 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 clientLeft property of an inline HTML element, set its display style property to 'block'.

Possible values:

Integer that represents the width in pixels.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the clientLeft property:

<head>
    <style>
        .examDiv {
            margin:15px;
            border:2px solid red;
            padding:20px;
            
            overflow:scroll;
        }
    </style>
    <script type="text/javascript">
        function GetClientLeft () {
            var div = document.getElementById ("myDiv");
            alert ("The width of the left border (with scrollbar): " + div.clientLeft + "px");
        }
    </script>
</head>
<body>
    <div id="myDiv" class="examDiv">
        This element has the following style settings:<br />
        margin:15px; border:2px solid red; padding:20px;
    </div>
    <button onclick="GetClientLeft ();">Test clientLeft property!</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 clientLeft property, in the case when the vertical scrollbar appears on the left side:

<head>
    <style>
        .examDiv {
            margin:15px;
            border:2px solid red;
            padding:20px;
            direction: rtl;
            
            overflow:scroll;
        }
    </style>
    <script type="text/javascript">
        function GetClientLeft () {
            var div = document.getElementById ("myDiv");
            alert ("The width of the left border (with scrollbar): " + div.clientLeft + "px");
        }
    </script>
</head>
<body>
    <div id="myDiv" class="examDiv">
        This element has the following style settings:<br />
        margin:15px; border:2px solid red; padding:20px;
    </div>
    <button onclick="GetClientLeft ();">Test clientLeft property!</button>
</body>