HTML DOM Element clientLeft
Example
Display the width of myDIV's top and left border:
const elmnt = document.getElementById("myDIV");
let text = "Border top width: " + elmnt.clientTop + "px<br>";
text += "Border left width: " + elmnt.clientLeft + "px";
Try it Yourself »
let text = "Border top width: " + elmnt.clientTop + "px<br>";
text += "Border left width: " + elmnt.clientLeft + "px";
More examples below.
Description
The clientLeft property returns the width of the element's left border, in pixels.
The clientLeft property does not include the element's left padding or left margin.
The clientLeft property is read-only.
Note
The style.borderLeftWidth Property also returns the width of an element's left border.
Tutorial:
See Also:
Syntax
element.clientLeft
Return Value
Type
Description
Number The width of the element's left border, in pixels.
More Examples
In this example, the text direction of "myDIV" is right-to-left, and it has a scrollbar:
let left = document.getElementById("myDIV").clientLeft;
Try it Yourself »
Browser Support
element.clientLeft is supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |