Open In App

HTML DOM clientTop Property

Last Updated : 13 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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

Syntax:

element.clientTop 

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

Example: 

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM clientTop Property
    </title>
    <style>
        h1 {
            color: green;
            font-size: 35px;
        }
          
        #GFG {
            height: 100px;
            width: 350px;
            padding: 20px;
            margin: 25px;
            border-left: 10px solid coral;
            border-top: 15px solid blue;
            background-color: green;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>DOM clientTop 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>
  
</body>
  
</html>


Output:

Initially:

 

After Click on the Button:

 

Supported Browsers: The browser supported by DOM clientTop 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


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads