ZetCode

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.

index.html
<!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.

index.html
<!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.

index.html
<!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.

index.html
<!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.

index.html
<!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

My name is Jan Bodnar, and I am a passionate programmer with extensive programming experience. I have been writing programming articles since 2007. To date, I have authored over 1,400 articles and 8 e-books. I possess more than ten years of experience in teaching programming.

List all JS DOM tutorials.