Skip to content
Related Articles

Related Articles

HTML | DOM clientLeft Property

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Aug, 2022

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.



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



<!DOCTYPE html>
        HTML | DOM clientLeft Property
        h1 {
            color: green;
            font-size: 35px;
        #GFG {
            height: 100px;
            width: 350px;
            padding: 20px;
            margin: 25px;
            border: 10px solid coral;
            background-color: green;
        <h2>DOM clientLeft Property </h2>
        <div id="GFG">
            <p style="color:white;font-size:25px;">
            <p id="sudo" style="color:white;"></p>
        <button onclick="Geeks()">Submit</button>
            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;


  • Initially:


  • After Click on the Button:


Supported Browsers: The browser supported by DOM clientLeft property are listed below:

  • Google Chrome 1.0 and above
  • Edge 12.0 and above
  • Internet Explorer 5.0 and above
  • Firefox 3.0 and above
  • Opera 8.0 and above
  • Safari 3.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!