HTML DOM clientLeft Property

Last Updated : 13 Jun, 2023

The DOM clientLeft Property is used to return the width of the left border to an element in terms of pixel.It does not include the measurement of the width of the left padding or the left margin.It is read-only property.

Syntax:

element.clientLeft

Return Value: It returns a numeric value which represent the width of the left border to an element.

Example:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        HTML | DOM clientLeft Property 
  
    </title> 
    <style> 
        h1 { 
            color: green; 
            font-size: 35px; 
        } 
          
        #GFG { 
            height: 100px; 
            width: 350px; 
            padding: 20px; 
            margin: 25px; 
            border: 10px solid coral; 
            background-color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksForGeeks</h1> 
        <h2>DOM clientLeft Property </h2> 
        <div id="GFG"> 
            <p style="color:white;font-size:25px;"> 
                GeeksforGeeks 
            </p> 
            <p id="sudo" style="color:white;"></p> 
        </div> 
        <button onclick="Geeks()">Submit</button> 
        <script> 
            function Geeks() { 
                var w = document.getElementById("GFG"); 
  
                // Using clientTop property 
                var x = "Border-Top-Width is: "  
                + w.clientTop + "px<br>"; 
  
                x += "Border-Left-width  : "  
                + w.clientLeft + "px"; 
                document.getElementById("sudo").innerHTML = x; 
            } 
        </script> 
    </center> 
</body> 
</html>