HTML DOM Element clientLeft Property

Definition and Usage

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

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

clientLeft The property is read-only.

Note:style.borderLeftWidth attributeAlso returns the width of the element's left border.

See also:CSS Box Model Tutorial

See also:

clientTop attribute

clientWidth attribute

clientHeight attribute

offsetLeft attribute

offsetTop attribute

Example

Example 1

Display the width of the top and left borders of myDIV:

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

Try it yourself

Example 2

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

Syntax

element.clientLeft

Return value

Type Description
Number The width of the element's left border, in pixels.

Browser support

All browsers support element.clientLeft:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
supported supported supported supported supported supported