Set the height of a div element using jQuery
The content height of a div can dynamically set or change 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=
</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=
</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=
</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=
</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=
</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=
</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.