revision:
The Element.getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.
The method returns a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height.
Note: the scrolling that has been done is taken into account. This means that the rectangle's edges (top, left, bottom, and right) change their values every time the scrolling position changes.
getBoundingClientRect()
Parameters: none
const rect = element.getBoundingClientRect();
<div>
<div id="rect-1"></div>
</div>
<style>
div#rect-1 {width: 30vw; height: 20vw; padding: 2vw; margin: 5vw auto; background: purple; color: white;}
</style>
<script>
let elem = document.querySelector("#rect-1");
let rect = elem.getBoundingClientRect();
for (const key in rect) {
if (typeof rect[key] !== "function") {
let para = document.createElement("p");
para.textContent = `${key} : ${rect[key]}`;
document.getElementById("rect-1").appendChild(para);
}
}
</script>
<div>
<div id="example"></div>
<div id="controls"></div>
</div>
<style>
div#example {width: 30vw; height: 20vw; padding: 2vw; margin: 5vw auto; background: purple;}
body {padding-bottom: 100vw;}
p { margin: 0; }
</style>
<script>
function update() {
const container = document.getElementById("controls");
const elem = document.getElementById("example");
const rect = elem.getBoundingClientRect();
container.innerHTML = "";
for (const key in rect) {
if (typeof rect[key] !== "function") {
let para = document.createElement("p");
para.textContent = `${key} : ${rect[key]}`;
container.appendChild(para);
}
}
}
document.addEventListener("scroll", update);
update();
</script>
<div>
<div onscroll="myFunction()" style="height:200px; width:300px; overflow:auto;">
<div id="myDiv" style="width:250px; height:150px; padding:16px; border:1px solid black;">
Scroll to display the bounding client rect of the element with the border.
</div>
<div style="width:100vw; height:100vw;"></div>
</div>
<p id="rect-2"></p>
</div>
<script>
function myFunction() {
const element = document.getElementById("myDiv");
const rect = element.getBoundingClientRect();
document.getElementById("rect-2").innerHTML =
"Left: " + rect.left.toFixed() + ", Top: " + rect.top.toFixed() + ", Width: " + rect.width + ", <br>" + " Height: " + rect.height;
}
</script>