Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
communitycreator
clientleft
dom

What is the HTML ClientLeft property?

Ayush Trivedi

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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.

RELATED TAGS

html
communitycreator
clientleft
dom

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring