Easy Tutorial
❮ Met Console Groupcollapsed Prop Style Borderimagewidth ❯

HTML DOM clientLeft Property

Element Object

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;

Element Object

❮ Met Console Groupcollapsed Prop Style Borderimagewidth ❯