HTML - DOM Element clientWidth Property

Quiz

The HTML DOM Element clientWidth property is used to retrieve the client width of an element, including padding but excluding margin, border, or scrollbar width. The client width refers to the width of an element within the document.

As it is a read-only property, it is useful for responsive design and layout calculations.

Syntax

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

element.clientWidth;

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 Width of an Element

The following program demonstrates the usage of the HTML DOM Element clientWidth property by retrieving an element width excluding border −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element clientWidth</title> 
<style>
   .example-element {
       width: 390px;
       border: 2px solid #333;
       padding: 10px;
       background-color: lightblue;
   }
</style>
</head>
<body>
<h3>HTML DOM Element clientWidth property</h3>
<div class="example-element" id="exampleElement">
<p>This element has some content.</p>
</div>
<div id="output">
<p>Element Client Width:</p>
<p>Width: <span id="width"> </span> pixels</p>
</div>    
<script>
   document.addEventListener("DOMContentLoaded", function() {
      var element = document.getElementById("exampleElement");
      var width = element.clientWidth;
      document.getElementById("width").textContent = width;
   });
</script>
</body>
</html>

Once the above program is executed, it displays the width of the "div" element.

Example 2: Width of a Specific Element

Here is another example of the HTML DOM Element clientWidth property. We use this property to retrieve the width of the first <header> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element clientWidth</title>
<style>
   h1 {
      border-top: 10px solid black;
      padding: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element clientWidth Property</h3>
<h1 id="firstHeader">First Header Element</h1>
<div id="output">
   <p>Top Border Width of the First Header Element:</p>
   <p>Width: <span id="width"></span> pixels</p>
</div>         
<script>
   document.addEventListener("DOMContentLoaded", function() {
      var firstHeader = document.getElementById("firstHeader");
      var outputWidth = document.getElementById("width");   
      function updateHeaderWidth() {
         var width = firstHeader.clientWidth;
         outputWidth.textContent = width;
      }
      // Initial update
      updateHeaderWidth();
      // Update on window resize
      window.addEventListener("resize", updateHeaderWidth);
   });
</script>
</body>
</html>

The above program displays the width of the first "header" element.

Example 3: Updating the Width Dynamically

In the example below, we use the clientWidth property to update the width of an element dynamically whenever the cursor moves over it −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element clientWidth</title>
<style>
   .box {
       background-color: lightblue;
       border: 2px solid blue;
       text-align: center;
       line-height: 100px;
       transition: width 0.3s ease;
   }
</style>
</head>
<body>
<h3>HTML DOM Element clientWidth Property</h3>
<div class="box" id="box">Resize Me!</div>
<div id="output">Client Width: <span id="width">
</span> pixels</div>    
<script>
   document.addEventListener("DOMContentLoaded", function() {
      var box = document.getElementById("box");
      var outputWidth = document.getElementById("width");
      // Function to update client width
      function updateClientWidth() {
         var width = box.clientWidth;
         outputWidth.textContent = width;
      }
      // Initial update
      updateClientWidth();
      // Update on box resize (simulated)
      box.addEventListener("mouseover", function() {
         box.style.width = (box.clientWidth + 20)+ "px";
         updateClientWidth();
      });
      box.addEventListener("mouseout", function(){
         box.style.width = "200px";
         updateClientWidth();
      });
   });
</script>
</body>
</html>

The above program displays a container (box), and when mouse over it, the width of the container will change (update) dynamically.

Supported Browsers

Property
clientWidth	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page