HTML - DOM Element clientLeft Property

Quiz

The HTML DOM Element clientLeft property is used to retrieve the width of an element's left border, excluding left padding or margin. The returned width will be measured in pixels (px).

It is useful for accessing and determining the accurate size of the element's border, and it is a read-only property, which means it cannot be set or updated.

Syntax

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

element.clientLeft;

Parameters

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

Return Value

This property returns the left border width of the element in pixels.

Example 1: Retrieving the Left Border Width of an Element

The following is the basic example of the HTML DOM Element clientLeft property. It retrieves the width of an element's left border −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element clientLeft</title>
<style>
   #myElement {
      width: 200px;
      height: 100px;
      border: 10px solid black;
      border-left: 30px solid red;
   }
   #result {
      color: blue;
   }
</style>
</head>
<body>
<h3>HTML DOM Element clientLeft property</h3>
<div id="myElement">Example Element</div>
<p id="result"></p>
<script>
   document.addEventListener("DOMContentLoaded", function() {
      var element = document.getElementById("myElement");
      var leftBorderWidth = element.clientLeft;
      var resultElement = document.getElementById("result");
      resultElement.textContent = 
	  "Left border width of #myElement: " + leftBorderWidth + " pixels";
   });
</script>
</body>
</html>

The above program displays the width of the left border of a "div" element as "29px".

Example 2: Left Border Width of Last div Element

Following is another example of the HTML DOM Element clientLeft property. We use this property to retrieve the width of the left border of the last <div> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element clientLeft</title>
<style>
   .example-div {
       width: 200px;
       height: 100px;
       border: 10px solid black;
       margin-bottom: 10px;
   }
   .border-width {
       color: green;
       font-weight: bold;
   }
</style>
</head>
<body>
<h3>HTML DOM Element clientLeft property</h3>
<div class="example-div">First div element</div>
<div class="example-div">Second div element</div>
<div class="example-div" id="lastDiv">Third div element (last)</div>
<div id="result">Left border width of the last will be displayed here:
<span id="spn"></span>
</div>
<script>
   document.addEventListener("DOMContentLoaded", ()=> {
      var lastDiv = document.getElementById("lastDiv");
      var leftBorderWidth = lastDiv.clientLeft;
      var spnEle = document.getElementById("spn");
      spnEle.innerHTML = leftBorderWidth + "px"
   });
</script>
</body>
</html>

Once the above program is executed, it displays the width of the left border of the last "div" as 10px.

Example 3: Width of a Sidebar Element

In the example below, we use clientLeft property to retrieve the width of the left border of a sidebar element in the document −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element clientLeft</title>
<style>
   .sidebar {
       width: 250px;
       height: 100vh;
       position: fixed;
       top: 0;
       background-color: #333;
       color: white;
       padding: 20px;
       box-sizing: border-box;
       border-right: 10px solid #666;  
       overflow-x: hidden;
       resize: horizontal;
       z-index: 1;
   }
   .content {
       margin-left: 260px;
   } 
</style>
</head>
<body>
<h3>HTML DOM Element clientLeft property</h3>
<div class="sidebar" id="sidebar">
   <h2>Sidebar</h2>
   <p>This is a resizable sidebar element.</p>
</div>
<div class="content">
   <h1>Main Content</h1>
   <p>Content goes here...</p>
   <div id="result">Width of the sidebar will be displayed here:
      <span id="spn"></span>
   </div>
</div>
<script>
   document.addEventListener("DOMContentLoaded", function() {
      var sidebar = document.getElementById("sidebar");
      var resultElement = document.getElementById("result");
      // Define a function to update sidebar width
      function updateSidebarWidth() {
         var sidebarWidth = sidebar.offsetWidth;
         var spnEle = document.getElementById("spn");
         spnEle.innerHTML = sidebarWidth + "px"
      }       
      // Call the function when page loaded
      updateSidebarWidth();   
      // Call the function when resize happen
      window.addEventListener("resize",updateSidebarWidth);
      sidebar.addEventListener("mousemove", function() {
         updateSidebarWidth();
      });
   });
</script>
</body>
</html>

The above program displays the width of the left border of a sidebar element as "250px".

Supported Browsers

Property
clientLeft	Yes 1	Yes 12	Yes 1	Yes 3	Yes 9

html_dom.htm

Print Page