How to Get Width of Element in JavaScript
- Use HTML DOM Property to Get Width of Element in JavaScript
-
Use
getBoundingClientRect()Method to Get Width of Element in JavaScript
JavaScript allows us to interact with the web browser and the HTML elements. One of the very basic elements would be an img element or a div element.
Retrieving the correct dimension of such an element can help make a precise decision on aligning other components. So, here we will discuss detecting the actual size, height, width of an HTML element.
A visible contents location based on the viewports dimension can be figured out with the help of the HTML DOM property offsetWidth.
Also, we will use the method element.getBoundingClientRect() to return an overall positioning of a certain element.
Use HTML DOM Property to Get Width of Element in JavaScript
The HTML DOM property offsetHeight and offsetWidth deduct the height and width accordingly. It also includes the padding, border, scrollbar if these are present with the visible content.
We will check a div element in the following example and set it with a certain dimension.
Later, we will grab the specific id to work on the div element and apply the offsetWidth property to console out the element’s width.
Code Snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<div id="foo" style="background-color: purple; height:125px; width:125px">
</div>
</body>
</html>
var height = document.getElementById('foo').offsetHeight;
var width = document.getElementById('foo').offsetWidth;
console.log(height);
console.log(width);
Output:
Use getBoundingClientRect() Method to Get Width of Element in JavaScript
The method getBoundingClientRect() will return a DOMRect object that will contain multiple parameters.
These parameters portray the actual positioning of the content corresponding to the viewport and browser conventions.
We will also retrieve the height width for our element and the additional dimensions in this drive.
Code Snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<div id="foo" style="background-color: black; height:125px; width:125px">
</div>
</body>
</html>
var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
console.log(height);
console.log(width);
console.log(document.getElementById('foo').getBoundingClientRect());
Output:
-Method-to-Get-Width-of-Element.webp)
