JavaScript getBoundingClientRect
last modified April 2, 2025
This article explores the getBoundingClientRect method in JavaScript.
It provides detailed information about an element's size and position relative
to the viewport. This is essential for precise element positioning.
Basic Definition
The getBoundingClientRect method returns a DOMRect object containing
size and position information about an element. The returned object includes
properties like top, right, bottom, left, width, and height.
These values are relative to the viewport (visible portion of the page). The method is commonly used for element positioning, collision detection, and animation calculations. It provides pixel-perfect measurements.
Basic getBoundingClientRect
This example demonstrates how to get basic position information of an element.
<!DOCTYPE html>
<html>
<head>
<title>Basic getBoundingClientRect</title>
<style>
#box {
width: 150px;
height: 100px;
background: lightblue;
margin: 50px;
padding: 20px;
}
</style>
</head>
<body>
<div id="box">Sample Box</div>
<button onclick="showPosition()">Show Position</button>
<script>
function showPosition() {
const box = document.getElementById('box');
const rect = box.getBoundingClientRect();
console.log('Top:', rect.top);
console.log('Right:', rect.right);
console.log('Bottom:', rect.bottom);
console.log('Left:', rect.left);
console.log('Width:', rect.width);
console.log('Height:', rect.height);
}
</script>
</body>
</html>
This code creates a styled div element and a button. When clicked, the button logs the element's position and dimensions to the console. The values include padding and border but not margin.
The getBoundingClientRect method returns all position-related
properties in one call. This is more efficient than querying individual
properties separately.
Element Visibility Detection
This example shows how to check if an element is visible in the viewport.
<!DOCTYPE html>
<html>
<head>
<title>Visibility Detection</title>
<style>
#longContent {
height: 2000px;
}
#target {
position: absolute;
top: 1500px;
width: 200px;
height: 100px;
background: coral;
}
</style>
</head>
<body>
<div id="longContent">Scroll down</div>
<div id="target">Target Element</div>
<button onclick="checkVisibility()">Check Visibility</button>
<script>
function checkVisibility() {
const target = document.getElementById('target');
const rect = target.getBoundingClientRect();
const isVisible = (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
alert(isVisible ? 'Element is visible' : 'Element is not visible');
}
</script>
</body>
</html>
This example creates a long page with a target element positioned far down. The script checks if the target element is currently visible in the viewport.
The visibility check compares the element's position with the viewport dimensions. This technique is useful for lazy loading or scroll-based animations.
Element Centering
This example demonstrates how to center an element using position data.
<!DOCTYPE html>
<html>
<head>
<title>Element Centering</title>
<style>
#container {
position: relative;
width: 400px;
height: 400px;
border: 1px solid black;
}
#box {
position: absolute;
width: 100px;
height: 100px;
background: lightgreen;
}
</style>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
<button onclick="centerElement()">Center Box</button>
<script>
function centerElement() {
const container = document.getElementById('container');
const box = document.getElementById('box');
const containerRect = container.getBoundingClientRect();
const boxRect = box.getBoundingClientRect();
const centerX = (containerRect.width - boxRect.width) / 2;
const centerY = (containerRect.height - boxRect.height) / 2;
box.style.left = `${centerX}px`;
box.style.top = `${centerY}px`;
}
</script>
</body>
</html>
This code centers a box within its container when the button is clicked. It calculates the center position using the dimensions from both elements.
The example shows how getBoundingClientRect can be used for precise
positioning calculations. This technique works regardless of the container's
position in the document.
Collision Detection
This example implements basic collision detection between two elements.
<!DOCTYPE html>
<html>
<head>
<title>Collision Detection</title>
<style>
#container {
position: relative;
width: 500px;
height: 300px;
border: 1px solid black;
}
#box1, #box2 {
position: absolute;
width: 80px;
height: 80px;
}
#box1 {
background: lightblue;
left: 50px;
top: 50px;
}
#box2 {
background: pink;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
</div>
<button onclick="checkCollision()">Check Collision</button>
<p id="result"></p>
<script>
function checkCollision() {
const box1 = document.getElementById('box1');
const box2 = document.getElementById('box2');
const result = document.getElementById('result');
const rect1 = box1.getBoundingClientRect();
const rect2 = box2.getBoundingClientRect();
const isColliding = !(
rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom
);
result.textContent = isColliding ? 'Collision detected!' : 'No collision';
}
</script>
</body>
</html>
This example checks if two positioned elements overlap. The collision detection algorithm compares the boundaries of both elements.
The technique is useful for games, drag-and-drop interfaces, or any application where element interaction matters. The algorithm can be extended for more complex shapes.
Scroll Position Tracking
This example tracks an element's position relative to the viewport during scroll.
<!DOCTYPE html>
<html>
<head>
<title>Scroll Tracking</title>
<style>
#longContent {
height: 2000px;
}
#tracker {
position: fixed;
top: 10px;
right: 10px;
background: white;
padding: 10px;
border: 1px solid black;
}
#target {
position: absolute;
top: 800px;
width: 200px;
height: 100px;
background: gold;
}
</style>
</head>
<body>
<div id="tracker">Scroll position: <span id="position">0</span></div>
<div id="longContent">Scroll down to track the yellow box</div>
<div id="target">Target Element</div>
<script>
window.addEventListener('scroll', function() {
const target = document.getElementById('target');
const positionDisplay = document.getElementById('position');
const rect = target.getBoundingClientRect();
positionDisplay.textContent = `Top: ${Math.round(rect.top)}px`;
});
</script>
</body>
</html>
This code creates a long scrolling page with a fixed position display. The display shows the target element's current top position relative to the viewport.
The example demonstrates how getBoundingClientRect can be used in
scroll event handlers. This is useful for scroll-based animations or UI effects.
Source
MDN getBoundingClientRect Documentation
This article covered the getBoundingClientRect method with practical
examples. It's a powerful tool for element positioning and measurement in modern
web development.
Author
List all JS DOM tutorials.