THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML DOM clientLeft Property

HTMLElement Object Reference Element Object

Example

Get the width of a <div> element's top and left border:

var elmnt = document.getElementById("myDIV");
var txt = "Border top width: " + elmnt.clientTop + "px<br>";
txt += "Border left width: " + elmnt.clientLeft + "px";

The result of txt will be:

Border top width: 15px
Border left width: 10px
Try it yourself »

More "Try it Yourself" examples below.


Definition and Usage

The clientLeft property returns the width of the left border of an element, in pixels.

This property does not include the element's left padding or the left margin.

Tip: You can also use the style.borderLeftWidth property to return the width of an element's left border.

Note: For Chrome, Firefox and Opera on Windows, if the element has a scrollbar (set by the CSS overflow property), and if the text direction of that element is right-to-left (set by the CSS direction property), this property includes the width of the vertical scrollbar, together with the left border width. In IE, however, it returns "0". On Mac OS, using Safari, Chrome, Firefox or Opera, it returns only the left border width.

Tip: To return the width of the top border of an element, use the clientTop property.

This property is read-only.


Browser Support

Property
clientLeft Yes Yes Yes Yes Yes

Syntax

element.clientLeft

Technical Details

Return Value: A Number, representing the width of an element's left border, in pixels

Examples

More Examples

Example

In this example, the text direction of <div> is right-to-left, and it has a scrollbar:

var left = document.getElementById("myDIV").clientLeft;
Try it yourself »

HTMLElement Object Reference Element Object