How to find the width of a div using vanilla JavaScript?
Last Updated :
29 Dec, 2023
To measure the width of a div element we will utilize the offsetWidth property of JavaScript. This property of JavaScript returns an integer representing the layout width of an element and is measured in pixels.
Below are the different approaches to finding the width of a div using vanilla JavaScript:
The DOM offsetWidth property is used to return the layout width of an element as an integer.
Example 1: The following program will illustrate the solution using offsetWidth
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Check Width</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
}
#GFG {
height: 30px;
width: 300px;
padding: 10px;
margin: 15px;
background-color: green;
}
#checkButton {
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="GFG">
<b>Division</b>
</div>
<button id="checkButton" onclick="checkWidth()">
Check Width
</button>
<script>
function checkWidth() {
const elemWidth = document.getElementById("GFG").offsetWidth;
alert("Width of the div: " + elemWidth + " pixels");
}
</script>
</body>
</html>
Output:
The DOM clientWidth Property is used to return the viewable width of a specific element including padding but excluding the measurement of margin, border, and scrollbar width.
Example: In this example, we are using clientWidth() .
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Check Width</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
}
#GFG {
height: 30px;
width: 300px;
padding: 10px;
margin: 15px;
background-color: green;
}
#checkButton {
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="GFG">
<b>Division</b>
</div>
<button id="checkButton" onclick="checkWidth()">
Check Width
</button>
<script>
function checkWidth() {
const elemWidth = document.getElementById("GFG").clientWidth;
alert("Width of the div: " + elemWidth + " pixels");
}
</script>
</body>
</html>
Output:
The getComputedStyle() method is used to get all the computed CSS property and values of the specified element. The use of computed style is displaying the element after stylings from multiple sources have been applied. The getComputedStyle() method returns a CSSStyleDeclaration object.
Example: In this example, we are using getComputedStyle() method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Check Width (getComputedStyle)</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
#myDiv {
width: 200px;
height: 100px;
background-color: #007BFF;
margin-bottom: 10px;
}
#checkButtonComputed {
margin: 10px;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<button id="checkButtonComputed">
Check Width (getComputedStyle)
</button>
<script>
const myDiv = document.getElementById("myDiv");
const checkButtonComputed =
document.getElementById("checkButtonComputed");
checkButtonComputed.addEventListener("click", () => {
const computedStyle = window.getComputedStyle(myDiv);
const width = computedStyle.getPropertyValue("width");
alert("Width using getComputedStyle: " + width);
});
</script>
</body>
</html>
Output:
The HTML DOM getBoundingClientRect() Method returns the relative positioning to the viewport. It returns 8 properties: left, top, right, bottom, x, y, width, and height. Scrolling will change the position value.
Example: In this example, we are using getBoundingClientReact().
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Check Width (getBoundingClientRect)</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
#myDiv {
width: 200px;
height: 100px;
background-color: #007BFF;
margin-bottom: 10px;
}
#checkButtonBounding {
margin: 10px;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<button id="checkButtonBounding">
Check Width (getBoundingClientRect)
</button>
<script>
const myDiv = document.getElementById("myDiv");
const checkButtonBounding =
document.getElementById("checkButtonBounding");
checkButtonBounding.addEventListener("click", () => {
const rect = myDiv.getBoundingClientRect();
const width = rect.width;
alert("Width using getBoundingClientRect: " + width);
});
</script>
</body>
</html>
Output:
Note: clientWidth returns the inner width which includes padding but excludes borders and scroll bars whereas offsetWidth returns the outer width which includes padding and borders.
Similar Reads
How to get the Width of Scroll bar using JavaScript?
Given an HTML document, the task is to get the width of the scrollbar using JavaScript. Approach:Create an element (div) containing a scrollbar.OffsetWidth defines the width of an element + scrollbar width.ClientWidth defines the width of an element.So scrollbar can be defined as width = offsetWidth
3 min read
How to get the Width and Height of an Image using JavaScript?
Given an image and the task is to get the width and height of the image using JavaScript. The width and height property is used to display the image width and height. Syntax for width:let width = this.width;Syntax for height:let height = this.height;Example 1: This example selects the image and then
2 min read
How to Adjust the Width of Input Field Automatically using JavaScript?
The <input> element in HTML is used to create interactive controls for forms, allowing users to input data. It is one of the most versatile elements, with various input types and attributes that make it powerful for building forms. One important attribute is the width attribute, which allows y
2 min read
How to change the width of an iframe to 100% using JavaScript ?
In this article, we are given an HTML document containing an <iframe> element and the task is to change the width of the <iframe> element to 100% with the help of JavaScript. There are two methods to change the width of the iframe which are discussed below: Method 1: This method uses the
2 min read
How to calculate Width and Height of the Window using JavaScript ?
In this article, we will know to calculate the width & the height of the window using Javascript. Given an HTML document that is running on a Window & we need to find the height and width of the window. The Window innerWidth property is used for returning the width of a window’s content area
2 min read
How to get the image size (height & width) using JavaScript?
To get the size of an image (height and width), Element.clientHeight and Element.clientWidth properties are used. Element.clientHeight: We can access the inner height of an element with this property. This height includes the padding but not the margin and border. Element.clientWidth: We can access
2 min read
How to get the div height using JavaScript ?
In this article, we will see How to get the div height using Javascript. We can do this by following ways: Using the offsetHeight property.Using the clientHeight property.Using getBoundingClientRect() Method. Method 1: Using the offsetHeight property: The offsetHeight property of an element is a rea
3 min read
How to get the height of scroll bar using JavaScript ?
To get the height of scroll bar we could use different approaches. In this article, we are given an HTML document and the task is to get the height of the scrollbar using JavaScript. Following are the different approaches to solving this problem which are discussed below: Table of Content Using Cont
3 min read
How to get the width of device screen in JavaScript ?
Given an HTML document that is running on a device and the task is to find the width of the working screen device using JavaScript. Example 1: This example uses window.innerWidth to get the width of the device screen. The innerWidth property is used to return the width of the device. HTML<!DOCTYP
2 min read
How to Change Border Width of Div in JavaScript ?
Div elements are essential in creating modern web applications, and manipulating their properties dynamically can enhance user experience. In this article, we'll see how to change the border width of a div element using JavaScript. The border-width property in CSS is used to specify the width of the
2 min read