Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to find width of a div using vanilla JavaScript?
Overview
A vanilla JavaScript is a framework of JavaScript, it provides mainly two different methods to find the width of a div using the "offsetWidth" and "clientWidth". Both methods have the ability to find the width of any element on a web page. In this vanilla JavaScript refers to the methods of the JavaScript that are predefined for the developers. It provides cross-platform compatibility.
Syntax
The Syntax to find the width of the div is given below. These two methods are used to calculate the width of the div.
elementHTML.offsetWidth elementHTML.clientWidth
elementHTML − It is the div element of which the width has to be calculated.
offsetWidth − It is a JavaScript method which calculates the width of the div. While calculating the width it also includes the padding of the element.
clientWidth − It is the predefined method of JavaScript which calculates the width of the div by excluding the margin of the div, border of the div and the scrollbar.
Algorithm 1
Step 1 − Create a HTML file on your text editor and add a HTML boilerplate to the file.
Step 2 − Now create a HTML parent div container with a green background.
<div id="div" style="background-color: green;padding: 2rem;"> <span id="w"></span> </div>
Step 3 − Now add the script tag to the body of HTML.
<script></script>
Step 4 − Now store the reference of the HTML element to the variable.
el = document.getElementById("div");
Step 5 − Now calculate the width of the element using offsetWidth property.
var elWidth = el.offsetWidth;
Step 6 − Now use the HTML DOM (Document Object Manipulation) property to display the Output to the browser page.
document.getElementById("w").innerHTML="width: "+elWidth;
Example 1
In this Example we will be using the offset method for finding the width of the div.
<html>
<head>
<title> width of div using vanilla javascript </title>
</head>
<body>
<div id="div" style="background-color: green;padding: 2rem;">
<span id="w"></span>
</div>
<script>
var el = document.getElementById("div");
var elWidth = el.offsetWidth;
document.getElementById("w").innerHTML="width: "+elWidth;
</script>
</body>
</html>
Algorithm 2
Step 1 − Create a HTML file on your text editor and add a HTML boilerplate to the file.
Step 2 − Now create two HTML parent div containers. The first container has a green color and the second container has a fixed width of red background.
<div id="div" style="background-color: green;padding: 2rem;color: white;"> <span id="w"></span> </div> <div id="div2" style="background-color: red;width: 150px;height: 50px;color: white;"> <span id="w2"></span> </div>
Step 3 − Now add the script tag to the body of HTML.
<script></script>
Step 4 − Now store the reference of the first HTML element to the variable.
var el = document.getElementById("div");
Step 5 − Now calculate the width of the first element using clientWidth property of the first container.
var elW = el.clientWidth;
document.getElementById("w").innerHTML = "width: " + elW;
Step 6 − Now store the reference of the second HTML element to the variable.
var el2 = document.getElementById("div2");
Step 5 − Now calculate the width of the second element using clientWidth property of the first container.
var elW = el.clientWidth;
document.getElementById("w").innerHTML = "width: " + elW;
Step 6 − Now store the reference of the second HTML element to the variable.
var el2 = document.getElementById("div2");
Step 6 − Now use the HTML DOM (Document Object Manipulation) property to display the Output to the browser page.
var elW2 = el2.clientWidth;
document.getElementById("w2").innerHTML = "width: " + elW2;
Example 2
In this Example we will use the clientWidth method to calculate the width of the div container and will also compare the static width and the dynamic width of the div container.
<html>
<head>
<title> width of div using vanilla javascript </title>
</head>
<body>
<div id="div" style="background-color: green;padding: 2rem;color: white;">
<span id="w"></span>
</div>
<div id="div2" style="background-color: red;width: 150px;height: 50px;color: white;">
<span id="w2"></span>
</div>
<script>
var el = document.getElementById("div");
var elW = el.clientWidth;
document.getElementById("w").innerHTML = "width: " + elW;
var el2 = document.getElementById("div2");
var elW2 = el2.clientWidth;
document.getElementById("w2").innerHTML = "width: " + elW2;
</script>
</body>
</html>
In the below image, there are two div container the green container is a container with the dynamic width as the size of the screen changes the width of the container will also change and the second container is the fixed width container in this type of container there effect of the size of the browser screen it is fixed with respect to viewport.
Conclusion
The feature to calculate the width of the div can be helpful in making the responsive layout of the page. It is also used in the animation transition purpose, for Example when a width of the container gets to zero then a new animation can trigger such as creation of new elements or change in the layout of the page. This feature can also be used to build graphs by making the width of the div static. The return type of both the methods is integer. The width calculated by both of the methods is calculated in "px".
289 Views
