Element property clientLeft in Javascript
The element property clientLeft is a read-only property that used to retrieve the width of the element's left border in pixels. It does not include the element's left padding or left margin. It returns the number that specifies the width of the element's left border in pixels.
Syntax
1 element.clientLeft Element property clientLeft
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .area {
5 height: 200px;
6 width: 350px;
7 padding: 10px;
8 margin: 15px;
9 border: 10px solid green;
10 background-color: lightgray;
11 }
12 </style>
13
14 <body>
15 <h1>The Element Object</h1>
16 <h2>The clientLeft properties</h2>
17
18 <div id="element" class="area">
19 <b>Information about DIV with ID area:</b><br>
20 <div>Height: 200px</div>
21 <div>Width: 350px</div>
22 <div>Padding: 10px</div>
23 <div>Margin: 15px</div>
24 <div>Border: 10px</div>
25 <p id="result"></p>
26 </div>
27
28 <script>
29 const element = document.getElementById("element");
30 let str = `<div>Client element left : <b>${element.clientLeft}px</b></div>`;
31
32 document.getElementById("result").innerHTML = str;
33 </script>
34 </body>
35 </html>In the above example, a document is created with elements that includes script element. A script element retrieves the element having ID element and access property clientLeft and form string. A paragraph content is modified with string value that will be display on UI.
Element property clientLeft
Related options for your search
Privacy Policy
Terms of Service
Disclaimer
Contact us
About us