Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the width of an element in JavaScript?
In this tutorial, we will learn to set the width of an element in JavaScript. We can use the "width" property in JavaScript to set the width of an element.
The web page should be responsive on every screen. Each element on a web page should have its area covered. We can set the size of elements by setting their width and height.
Let us look at how to set the width of an element in JavaScript. Following is the property by which we can set the width of an element in JavaScript ?
The width style property
Using the width style property of DOM
The width property is essential for arranging the elements in JavaScript. JavaScript DOM provides properties that can be used instead of CSS. The width property in DOM is used to set the width of an element.
There are multiple units to set the width as px, em, and cm. This property of JavaScript DOM can only be set on the block elements or elements with fixed positions.
All the users can follow the below syntax to use the width style property to set the width of an element in JavaScript.
Syntax
var element = document.getElementById("elementId");
element.style.width = "auto || Length || % || Initial || Inherit";
element.style.width; // returns the width of the element
Parameters
auto ? Default value
Length ? Length of the width set using px, em, or cm.
% ? Using percentage to set width
Initial ? Set to its initial value means the browser's default value.
Inherit ? Inherit width from its parent value.
Example 1: Setting Button Width
You can try to run the following code to learn how to set the width of an element in JavaScript.
<!DOCTYPE html>
<html>
<body>
<button type="button" id="btn" onclick="display()">
Change height and width
</button>
<script>
function display() {
document.getElementById("btn").style.width = "250px";
document.getElementById("btn").style.height = "250px";
}
</script>
</body>
</html>
Example 2: Dynamic Image Width with Range Slider
In the below-mentioned example, we have used an input field with the Range type. After sliding the bar, we will change the width of an image in run-time. We are using the width style property to set the width of an image.
<html>
<head>
<style>
#image {
border: 6px solid green;
width: 30%;
}
#container {
margin-top: 2%;
height: 5%;
}
#Range {
width: 30%;
}
</style>
</head>
<body>
<h3> Use <i> width style property </i> to set a width of an element </h3>
<img id="image" src="/html/images/logo.png" alt="Sample Image"/>
<div id="container">
<label for="Range"> Select Width: </label><br>
<input type="range" min="1" max="100" value="50" id="Range">
</div>
<p id="result"></p>
<script>
var image = document.getElementById("image");
document.getElementById("Range").onchange = function() {
var input = document.getElementById("Range").value;
var input_percen = input + "%";
image.style.width = input_percen;
var element = document.getElementById("result");
element.innerHTML = "Selected value of the width: " + input_percen;
}
</script>
</body>
</html>
Example 3: Creating Dynamic Oval Shapes
In the following example, we used two inputs: text input and a range bar. By accepting user input, we are creating several ovals equal to the inputs given by the user. We also used a for loop to generate some ovals decreasing their width gradually. We have used the width properly to set the width of the element.
<html>
<body>
<h2> Use <i> width style property </i> to set a width of an element </h2>
<div id="container">
<label for="number"> Type number of element: </label>
<input type="number" id="number" value="0" name="numbers"/><br>
<label for="Range"> Select Width: </label>
<input type="range" min="1" max="100" value="50" id="Range">
<div id="shapes">
</div>
</div>
<script>
var container = document.getElementById("shapes");
document.getElementById("Range").onchange = function() {
var input = document.getElementById("Range").value;
var input2 = document.getElementById("number").value;
container.innerHTML = ""; // Clear previous shapes
for(i = 0; i < input2; i++) {
var element = document.createElement("div");
element.style.backgroundColor = "red";
element.style.height = "50px";
element.style.margin = "10px";
element.style.border = "2px solid red";
element.style.borderRadius = "50%";
element.style.width = input + "%";
input = input - (1/3 * input);
container.appendChild(element);
}
}
</script>
</body>
</html>
Common Width Units
| Unit | Description | Example |
|---|---|---|
px |
Pixels - absolute unit | element.style.width = "200px" |
% |
Percentage of parent element | element.style.width = "50%" |
em |
Relative to font size | element.style.width = "10em" |
auto |
Browser calculates width | element.style.width = "auto" |
Conclusion
The width style property in JavaScript DOM provides a flexible way to dynamically control element dimensions. Use pixels for fixed layouts, percentages for responsive design, and auto for browser-calculated widths.
12K+ Views
