HTML - DOM Element clientTop Property

Quiz

The HTML DOM Element clientTop property is used to retrieve the width of an element's top border, and the width value will be in pixels (px). This property excludes padding and margin spacing.

It is useful for obtaining accurate element positioning and size calculations in webpage layouts.

Syntax

Following is the syntax of the HTML DOM Element clientTop property −

element.clientTop;

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns a number (in pixels) that holds the viewable width of the element.

Example 1: Retrieving the Top Border Width

The following is the basic example of the HTML DOM Element clientTop property −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element clientTop</title>
<style>
   #myElement {
       width: 190px;
       height: 90px;
       padding: 25px;
       border-top: 9px solid black;
       border-left: 9px solid red;
       background-color: lightblue;
   }
</style>
</head>
<body>
<h3>HTML DOM Element clientTop Property</h3>
<p>Retrieving Top Border Width of an Element</p>
<div id="myElement">Example Element</div>
<p>Click the button to retrieve the top border width of the element:</p>
<button onclick="getTopBorderWidth()">Get Top Border Width</button>
<p id="result"></p>
<script>
   function getTopBorderWidth() { 
      var element = document.getElementById("myElement");
      var topBorderWidth = element.clientTop; 
      var resultElement = document.getElementById("result");
      resultElement.innerHTML = 
	  "Top border width of #myElement: " + topBorderWidth + " pixels"; 
   }
</script>
</body>
</html>

The above program displays the top border width of the "div" element.

Example 2: Top Border Width of a Sidebar Element

Here is another example of the HTML DOM Element clientTop property. We use this property to retrieve the top border of the sidebar element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element clientTop</title>
<style>
   .sidebar {
       width: 250px; 
       position: fixed; 
       background-color: #333;
       color: white; 
       border-top: 10px solid black;  
       resize: horizontal; 
       overflow-x: hidden; 
       z-index: 1; 
   }
   .content {
       margin-left: 260px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element clientTop Property</h3>
<p>Retrieving Top Border Width of a Sidebar Element</p>
<div class="sidebar" id="sidebar">
<h2>Sidebar</h2>
<p>This is a resizable sidebar element.</p>
</div>
<div class="content">
<h2>Main Content</h2>
<p>Content goes here...</p>
<button onclick="getTopBorderWidth()">Get Top Border Width</button>
<div id="result">Top border width of the sidebar will be displayed here:
<span id = "spn"></span>
</div>
</div>
<script>
   function getTopBorderWidth() {
      var sidebar = document.getElementById("sidebar");
      var topBorderWidth = sidebar.clientTop;
      var spnEle = document.getElementById("spn");
      spnEle.innerHTML =+ topBorderWidth + " px";
   }
</script>
</body>
</html>

When the button is clicked, it displays the top border width of the sidebar element.

Example 3: Top Border Width of the First Header

In the example below, we use this property to retrieve the border width of the first header element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element clientTop</title>
<style>
   h3{
       border-top: 10px solid black;
       padding: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element clientTop Property</h3>
<p>Finding Top Border Width of the First Header Element</p>
<p>Click button to find the top border width of the first header</p>
<button onclick="getTopBorderWidth()">Find Top Border Width</button>
<p id="result">Top border width of the first header :</p>
<script>
   function getTopBorderWidth() {
      var firstHeader = document.querySelector("h3");
      var topBorderWidth = firstHeader.clientTop;
      var resultElement = document.getElementById("result");
      resultElement.textContent = 
      "Top border width of the first header: "+ topBorderWidth+ " pixels";
   }
</script>
</body>
</html>

When the button clicks, the top border width of the first header element will be displayed on the web page.

Supported Browsers

Property
clientTop	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page