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.

New on Educative
Learn to Code
Learn any Language as a beginner
Develop a human edge in an AI powered world and learn to code with AI from our beginner friendly catalog
🏆 Leaderboard
Daily Coding Challenge
Solve a new coding challenge every day and climb the leaderboard

Free Resources