HTML DOM Element clientLeft attribute

Definition and Usage

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

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

clientLeft The attribute 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

Show 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 from 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
Support Support Support Support Support Support