How to Use JavaScript getBoundingClientRect() Method
This write-up illustrates the working, and usage of the JavaScript “getBoundingClientRect()” method.
How to Use the JavaScript “getBoundingClientRect()” Method?
The “getBoundingClientRect()” method returns the DOMRect object having eight properties including “height”, “width”, “top”, “left”, “x”, “y”, “right”, and “bottom”. These eight values can be “static” for fixed ratio or “non-static” in the case of a scrollbar that changes the scrolling position. It can be used in different ways to calculate the size and position of the targeted HTML element.
Syntax
The following section explains various practical examples that apply the “getBoundingClientRect()” method to explain its usage.
HTML Code
First, have a look at the given HTML code:
#Div1 {
height: 100px;
width: 250px;
margin: 15px;
padding: 15px;
border: 3px solid green;
background-color: pink;
}
</style>
</head>
<body>
<h2> Use getBoundingClientRect() Method in JavaScript</h2>
<div id="Div1">
<p>This is a div.</p>
</div>
<button onclick="myFunc()">Click on it.</button>
<p id="sample"></p>
In the above lines of code:
- The “<style>” tag specifies the styling properties of the “<div>” HTML element whose associated id is “Div1”.
- After that, the “<body>” section first creates level 2 i.e., first subheading using the “<h2>”
- Next, the “<div>” tag includes a div with one paragraph statement defined in its body via the “<p>” tag.
- The “<button>” tag adds a button having an “onclick” event redirecting to the function “myFunc()” that will execute upon button click.
- Lastly, the “<p>” tag creates an empty paragraph to display the computed height and width of the given HTML element.
Note: This HTML code will be considered throughout all the examples of this write-up.
Example 1: Applying the “getBoundingClientRect()” Method to Calculate the Height and Width of the HTML Element
In this example, the “getBoundingClientRect()” method is utilized to calculate the width and height of the particular HTML element i.e., “div”.
JavaScript Code
Consider the following code:
function myFunc() {
const elem = document.getElementById("Div1");
const rect = elem.getBoundingClientRect();
document.getElementById("sample").innerHTML = "Width: " + rect.width + ", Height: " + rect.height;
}
</script>
In the above code snippet:
- Define a function named “myFunc()”.
- In its definition, the variable “elem” with a “const” keyword uses the “getElementById()” method to access the “<div>” element through its id “Div1”.
- After that, the second variable “rect” utilizes the “getBoundingClientRect()” method for returning the DOMRect object of the assessed div element as an output.
- Lastly, the “getElementById()” method fetches the empty paragraph via its id “sample” to display the computed height and width of the div via the “width” and “height” properties.
Output
The output displays the “width” and “height” of the corresponding HTML element appropriately.
Example 2: Applying the “getBoundingClientRect()” Method to Calculate the Position of the HTML Element Correspond to the Viewport
This example computes the position of the provided HTML element with the help of the “getBoundingClientRect()” method relative to the viewport(visible area of the web page).
JavaScript Code
Follow the given JavaScript code:
function myFunc() {
const elem = document.getElementById("Div1");
const rect = elem.getBoundingClientRect();
document.getElementById("sample").innerHTML = "Left: " + rect.left.toFixed() + ", Top: " + rect.top.toFixed();
}
</script>
In the above code lines, the “getElementById()” method fetches the empty paragraph via its id “sample” to display the fetched element specified positions using the “rect.left,toFixed()” method.
Output
As analyzed, the output returns the “Left” and “Top” positions of the provided HTML element upon button click, respectively.
Conclusion
The “getBoundingClientRect()” method is a well-known JavaScript method for computing the desired HTML element’s position as well as size. It returns a static value as its standard output in the form of the element’s position and size. This write-up explained the working, and use of the “getBoundingClientRect()” method in JavaScript.
Source: linuxhint.com