What is the HTML ClientLeft property?

ClientLeft is an HTML DOM property that returns the width of the left border of any element. However, it does not include the padding or the margin that is defined for the element.

Code

The following code finds the width of the left border of the div:

  • HTML
Console

Explanation

  • Line 5: We define border-left and the background-color for the CSS ID left.

  • Line 15: We hook the change() method to the onClick event of a button.

  • Line 17: We define a div with ID left.

  • Line 23: We define the change() function. We use document.getElementById() to get the div element with ID left.

  • Line 25: We get the left border width of the div, using the clientLeft method.

  • Line 26: We print the value of the left border width to the console.

Free Resources