HTML DOM clientLeft
Property
Example
Get the width of the top and left borders of a div element:
var elmnt = document.getElementById("myDIV");
var txt = "Top border width: " + elmnt.clientTop + "px<br>";
txt += "Left border width: " + elmnt.clientLeft + "px";
Definition and Usage
clientLeft
represents the width of an element's left border, in pixels. If the element's text direction is right-to-left (RTL) and a vertical scrollbar appears on the left due to content overflow, this property includes the width of the scrollbar.
clientLeft
does not include the left margin or left padding.
Tip: You can use the style.borderLeftWidth
property to get the width of the element's left border.
Tip: To return the width of the element's top border, use the clientTop
property.
clientLeft
is read-only.
Browser Support
Property | Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
clientLeft | Yes | Yes | Yes | Yes | Yes |
Syntax
element.clientLeft
Technical Details
| Return Value: | Returns an integer representing the width of the element's left border. | | --- | --- |
More Examples
Example
In this example, the div element has a right-to-left text direction and a scrollbar:
var left = document.getElementById("myDIV").clientLeft;