Selected Reading

HTML - DOM Element getBoundingClientRect() Method

Quiz

The HTML DOM Element getBoundingClientRect() method is used to get the size of an element and its position relative to the viewport.

It provides a DOMRect object containing properties like 'left', 'top', 'right', 'bottom', 'width', and 'height'. This is useful for precise positioning, collision detection, and responsive design adjustments.

Syntax

Following is the syntax of the HTML DOM Element getBoundingClientRect() method −

element.getBoundingClientRect()

Parameters

This method does not accept any parameter.

Return Value

This method returns the DOMRect Object with the left, top, right, bottom, x, y, width, and height properties.

Example 1: Dynamic Scroll Position Indicator

The following is basic example of the HTML DOM ELement getBoundingClientRect() method. This example will help you in scrolling dynamically position indicator in an HTML page.

So when you scroll the container part , a red horizontal bar will get adjusted its width to reflect the current scroll position as a percentage of the total scrollbar content height.

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element getBoundingClientRect()</title>
<style>
   body {
       height: 1000px;
   }
   #indicator {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 5px;
       background-color: red;
       transition: width 0.3s ease;
   }
</style>
</head>
<body>
<p id="indicator"></p>
<p>Scroll down to see the red indicator adjusting</p>
<script>
   window.addEventListener('scroll', function() {
      var indicator = document.getElementById('indicator');
      var scrollPosition = window.scrollY;
      var documentHeight = document.documentElement.scrollHeight;
      var windowHeight = window.innerHeight;
      var progress = 
	  (scrollPosition / (documentHeight - windowHeight)) * 100;
      indicator.style.width = progress + '%';
      // Use getBoundingClientRect to get the dimensions of the indicator
      var rect = indicator.getBoundingClientRect();
      document.getElementById('indicator').innerHTML = 
	  `Indicator dimensions: Width - ${rect.width.toFixed()}px, 
	  Height - ${rect.height.toFixed()}px`;
   });
</script>
</body>
</html>

The above program measures and displays the dimension of the scroll while scrolling up and down.

Example 2: Tracking Mouse Position

Following is another example of the HTML DOM Element getBoundingClientRect() method. It calculates and displays the dimensions of the mouse position when the cursor is moved over a tracker element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element getBoundingClientRect()</title>
<style>
   #tracker {
      width: 200px;
      height: 200px;
      border: 2px solid black;
      margin: 20px;
      text-align: center;
      line-height: 200px;
      font-size: 18px;
      cursor: crosshair;
   }
</style>
</head>
<body>
<h3>HTML DOM Element getBoundingClientRect() Method</h3>
<div id="tracker">Move mouse over me</div>
<div id="positionDisplay">Mouse position: </div>
<script>
   var tracker = document.getElementById('tracker');
   var positionDisplay = 
   document.getElementById('positionDisplay');
   tracker.addEventListener('mousemove', function(event) {
      var rect = tracker.getBoundingClientRect();
      var mouseX = event.clientX - rect.left;
      var mouseY = event.clientY - rect.top;
      positionDisplay.textContent = `Mouse position: (${mouseX}, ${mouseY})`;
   });
</script>
</body>
</html>

The above program displayed the mouse cursor position dynamically when the mouse cursor is moved.

Example 3: Resizable Element with Position and Dimensions

The below example shows how to create a resizable HTML element (resizableElement) and dynamically display its dimensions (dimensionsDisplay) −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element getBoundingClientRect()</title>
<style>
   #resizableElement {
       width: 200px;
       height: 150px;
       background-color: lightgreen;
       resize: both;
       overflow: auto;
       padding: 10px;
   }
   #dimensionsDisplay {
       position: fixed;
       top: 10px;
       right: 10px;
       background-color: #fff;
       padding: 10px;
       border: 1px solid #ccc;
       font-size: 14px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element getBoundingClientRect() Method</h3>
<div id="resizableElement" contenteditable="true">Resize Me!</div>
<div id="dimensionsDisplay">Width: 200px, Height: 150px</div> 
<script>
   var resizableElement = document.getElementById("resizableElement");
   var dimensionsDisplay = document.getElementById("dimensionsDisplay");
   function updateDimensions() {
      var rect = resizableElement.getBoundingClientRect();
      dimensionsDisplay.textContent = 
      `Width: ${rect.width.toFixed()}px,Height: ${rect.height.toFixed()}px`;
   }
   resizableElement.addEventListener('mousemove', updateDimensions);
   resizableElement.addEventListener('mouseup', updateDimensions);
</script>
</body>
</html>

After executing the program, a box is displayed. You can increase or decrease the width and height of the box, and the dimensions will be displayed dynamically.

Supported Browsers

Method
getBoundingClientRect()	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Previous Quiz Next