How to dynamically set the height and width of a div element using jQuery ?
Last Updated :
06 Aug, 2024
Set the height of a div element using jQuery
The content height of a div can be dynamically set or changed using height(), innerHeight(), and outerHeight() methods depending upon the user requirement. If the user wants to change the content height of a div dynamically, it includes changing the actual height, actual height with padding, and actual height with padding and border, then the user can use any of the following methods that will dynamically set the height of the content of an element.
Example 1: Content Height of div using height() method will change the height of the content of an element excluding the padding, border, and margin of the element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to dynamically set the height of
a div element using jQuery?
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style>
#div1 {
height: 50px;
width: 300px;
border: 2px solid black;
}
h1 {
color: green;
}
.box{
background: green;
border: 1px solid #ccc;
color: white;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Dynamically set the height of
a div element using jQuery</h3>
<div id="div1" class="box">
Dynamically set content height of
a div on GeeksforGeek.<br>
GeeksforGeeks is
a computer science portal which
helps students to learn various
programming language and master
data structures and algorithms.
There are various courses available
to learn new skills.
</div>
<br>
<form>
<input type="text" class="geeks1">
<button type="button" class="geeks2">
Set Height
</button>
</form>
<p id="p1"></p>
<p id="p2"></p>
</center>
<script>
$(document).ready(function(){
$(".geeks2").click(function(){
var demo ="Previous-height: "+
$("#div1").height();
+ "px";
$("#p1").text(demo);
var newHeight = $(".geeks1").val();
$(".box").height(newHeight);
demo = "New-height: "+
$("#div1").height();
+ "px";
$("#p2").text(demo);
});
});
</script>
</body>
</html>
Output:
Example 2: Content Height of div using innerHeight() method will change the height of the content of an element including the padding of the element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to dynamically set the height
of a div element using jQuery?
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style>
#div1 {
height: 50px;
width: 300px;
border: 2px solid black;
padding : 10px;
}
h1 {
color: green;
}
.box{
background: green;
border: 1px solid #ccc;
color: white;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Dynamically set the height of
a div element using jQuery</h3>
<div id="div1" class="box">
Dynamically set content height
of a div on GeeksforGeek.<br>
GeeksforGeeks is
a computer science portal which
helps students to learn various
programming language and master
data structures and algorithms.
There are various courses available
to learn new skills.
</div>
<br>
<form>
<input type="text" class="geeks1">
<button type="button" class="geeks2">
Set Height
</button>
</form>
<p id="p1"></p>
<p id="p2"></p>
</center>
<script>
$(document).ready(function(){
$(".geeks2").click(function(){
var demo ="Previous-height(+Padding) : "
+ $("#div1").innerHeight();
+ "px";
$("#p1").text(demo);
var newHeight = $(".geeks1").val();
$(".box").innerHeight(newHeight);
demo = "New-height(+Padding) : "+
$("#div1").innerHeight();
+ "px";
$("#p2").text(demo);
});
});
</script>
</body>
</html>
Output:
Example 3: Content Height of div using outerHeight() method will change the height of the content of an element including the padding and border of the element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to dynamically set the height
of a div element using jQuery?
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style>
#div1 {
height: 50px;
width: 300px;
border: 2px solid black;
padding : 10px;
}
h1 {
color: green;
}
.box{
background: green;
border: 1px solid #ccc;
color: white;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Dynamically set the height of
a div element using jQuery</h3>
<div id="div1" class="box">
Dynamically set content height
of a div on GeeksforGeek.<br>
GeeksforGeeks is
a computer science portal which
helps students to learn various
programming language and master
data structures and algorithms.
There are various courses available
to learn new skills.
</div>
<br>
<form>
<input type="text" class="geeks1">
<button type="button" class="geeks2">
Set Height
</button>
</form>
<p id="p1"></p>
<p id="p2"></p>
</center>
<script>
$(document).ready(function(){
$(".geeks2").click(function(){
var demo ="Previous-height(border+Padding) : "
+ $("#div1").outerHeight();
+ "px";
$("#p1").text(demo);
var newHeight = $(".geeks1").val();
$(".box").outerHeight(newHeight);
demo = "New-height(border+Padding) : "
+ $("#div1").outerHeight();
+ "px";
$("#p2").text(demo);
});
});
</script>
</body>
</html>
Output:
Set the width of a div element using jQuery
The content width of a div can dynamically set or change using width(), innerWidth(), and outerWidth() methods depending upon the user requirement. If the user wants to change the content width of a div dynamically, it includes changing the actual width, actual width with padding, and actual width with padding and border, then the user can use any of the following methods that will dynamically set the width of the content of an element.
- Using width() method
- Using innerWidth() method
- Using outerWidth() method
Example 1: Content Width of div using width() method will change the width of the content of an element excluding the padding, border, and margin of the element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to dynamically set the width
of a div element using jQuery?
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style>
#div1 {
height: 100px;
width: 200px;
border: 2px solid black;
padding : 10px;
}
h1 {
color: green;
}
.box{
background: green;
border: 1px solid #ccc;
color: white;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Dynamically set the width of
a div element using jQuery</h3>
<div id="div1" class="box">
Dynamically set content width of a div
on GeeksforGeek.<br>
GeeksforGeeks is
a computer science portal which
helps students to learn various
programming language and master
data structures and algorithms.
There are various courses available
to learn new skills.
</div>
<br>
<form>
<input type="text" class="geeks1">
<button type="button" class="geeks2">
Set Width
</button>
</form>
<p id="p1"></p>
<p id="p2"></p>
</center>
<script>
$(document).ready(function(){
$(".geeks2").click(function(){
var demo ="Previous-width : "+
$("#div1").width();
+ "px";
$("#p1").text(demo);
var newWidth = $(".geeks1").val();
$(".box").width(newWidth);
demo = "New-width : "+
$("#div1").width();
+ "px";
$("#p2").text(demo);
});
});
</script>
</body>
</html>
Output:
Example 2: Content Width of div using innerWidth() method will change the width of the content of an element including the padding of the element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to dynamically set the width
of a div element using jQuery?
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style>
#div1 {
height: 100px;
width: 200px;
border: 2px solid black;
padding : 10px;
}
h1 {
color: green;
}
.box{
background: green;
border: 1px solid #ccc;
color: white;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Dynamically set the width of
a div element using jQuery</h3>
<div id="div1" class="box">
Dynamically set content width of a div
on GeeksforGeek.<br>
GeeksforGeeks is
a computer science portal which
helps students to learn various
programming language and master
data structures and algorithms.
There are various courses available
to learn new skills.
</div>
<br>
<form>
<input type="text" class="geeks1">
<button type="button" class="geeks2">
Set Width
</button>
</form>
<p id="p1"></p>
<p id="p2"></p>
</center>
<script>
$(document).ready(function(){
$(".geeks2").click(function(){
var demo ="Previous-width(+Padding) : "+
$("#div1").innerWidth();
+ "px";
$("#p1").text(demo);
var newWidth = $(".geeks1").val();
$(".box").innerWidth(newWidth);
demo = "New-width(+Padding) : "+
$("#div1").innerWidth();
+ "px";
$("#p2").text(demo);
});
});
</script>
</body>
</html>
Output:
Example 3: Content Width of div using outerWidth() method will change the width of the content of an element including the padding and border of the element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to dynamically set the width
of a div element using jQuery?
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style>
#div1 {
height: 100px;
width: 200px;
border: 2px solid black;
padding : 10px;
}
h1 {
color: green;
}
.box{
background: green;
border: 1px solid #ccc;
color: white;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Dynamically set the width of
a div element using jQuery</h3>
<div id="div1" class="box">
Dynamically set content width of a div
on GeeksforGeek.<br>
GeeksforGeeks is
a computer science portal which
helps students to learn various
programming language and master
data structures and algorithms.
There are various courses available
to learn new skills.
</div>
<br>
<form>
<input type="text" class="geeks1">
<button type="button" class="geeks2">
Set Width
</button>
</form>
<p id="p1"></p>
<p id="p2"></p>
</center>
<script>
$(document).ready(function(){
$(".geeks2").click(function(){
var demo ="Previous-width(border+Padding) : "+
$("#div1").outerWidth();
+ "px";
$("#p1").text(demo);
var newWidth = $(".geeks1").val();
$(".box").outerWidth(newWidth);
demo = "New-width(border+Padding) : "+
$("#div1").outerWidth();
+ "px";
$("#p2").text(demo);
});
});
</script>
</body>
</html>
Output:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Similar Reads
How to Set Width and Height of Span Element using CSS ?
The <span> tag is used to apply styles or scripting to a specific part of text within a larger block of content. The <span> tag is an inline element, you may encounter scenarios where setting its width and height becomes necessary. This article explores various approaches to set the widt
2 min read
How to add CSS properties to an element dynamically using jQuery ?
In this article, we will see how to add some CSS properties dynamically using jQuery. To add CSS properties dynamically, we use css() method. The css() method is used to change the style property of the selected element. The css() method can be used in different ways. This method can also be used to
1 min read
How to get the width and height of an element in jQuery ?
In this article, we will find the width and height of an element in jQuery. There are three ways available in jQuery that we can use to find the height and width of an element. Table of Content Using the width() and height() methodsUsing the innerWidth() and innerHeight() methodsUsing the outerWidth
3 min read
How to get the height of a div using jQuery ?
In this article, we will learn how to get the height of a div using jQuery. In jQuery, height method is used to get the height of any element in HTML. The height method sets and returns the height of the HTML elements. Method 1: The height() method returns the first matched element's height, But the
3 min read
How to dynamically get the content height of a div using AngularJS ?
In this article, we will see how to get the height of the content of a <div> dynamically using Javascript, & will understand its implementation through the illustrations. The content height of a div can dynamically get using the clientHeight property and scrollHeight property depending upo
3 min read
How to dynamically get the content width of a div using AngularJS ?
In this article, we will see how to dynamically get the content width of a div using AngularJS, along with understanding its basic implementation through the examples. The content width of a div can dynamically get using clientWidth and scrollWidth properties depending upon the user's requirement. I
2 min read
How to get inner width (excluding the border) of an element using jQuery ?
We can get the inner width of any element using the jQuery innerWidth() method. The innerWidth() method returns the inner width of the first matched element including padding but not border. Syntax: $(selector).innerWidth() So the inner width of an element is shown in the below image. The inner widt
1 min read
How to animate div width and height on mouse hover using jQuery ?
In order to animate the div width and height on mouse hover, we can use the jQuery animate() method along with the mouseenter() and mouseleave() methods. .animate() method: The animate() method changes the state of the element with CSS style. Syntax: $(selector).animate({styles}, para1, para2, para3
3 min read
How to specify the width and height of the canvas using HTML ?
The <canvas> tag in HTML is used to draw graphics on web page using JavaScript. It can be used to draw paths, boxes, texts, gradient, and adding images. By default, it does not contain borders and text. Syntax: <canvas id="canvasID"> HTML Contents... <canvas> Attributes: The canvas
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