Как динамически установить высоту и ширину элемента div с помощью jQuery?

Опубликовано: 5 Января, 2022

Установите высоту элемента div с помощью jQuery

Высота содержимого div может динамически устанавливаться или изменяться с помощью методов height (), innerHeight () и outerHeight () в зависимости от требований пользователя. Если пользователь хочет изменить высоту содержимого div динамически, это включает изменение фактической высоты, фактической высоты с заполнением и фактической высоты с заполнением и границей, тогда пользователь может использовать любой из следующих методов, которые будут динамически устанавливать высоту содержимого элемента.

  • Использование метода height ()
  • Использование метода innerHeight ()
  • Использование метода outerHeight ()

Пример 1. Высота содержимого div с использованием метода height () изменит высоту содержимого элемента, исключая отступы, границу и поля элемента.

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 >

Выход:

Пример 2: Высота содержимого div с использованием метода innerHeight () изменит высоту содержимого элемента, включая заполнение элемента.

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 >

Выход:

Пример 3: Высота содержимого div с использованием метода outerHeight () изменит высоту содержимого элемента, включая отступы и границу элемента.

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 >

Выход:

Установите ширину элемента div с помощью jQuery

Ширина содержимого div может динамически устанавливаться или изменяться с помощью методов width (), innerWidth () и outerWidth () в зависимости от требований пользователя. Если пользователь хочет изменить ширину содержимого div динамически, это включает изменение фактической ширины, фактической ширины с заполнением и фактической ширины с заполнением и границей, тогда пользователь может использовать любой из следующих методов, которые будут динамически устанавливать ширину содержимого элемента.

  • Использование метода width ()
  • Использование метода innerWidth ()
  • Использование метода outerWidth ()

Пример 1. Ширина содержимого div с использованием метода width () изменит ширину содержимого элемента, исключая отступ, границу и поле элемента.

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 >

Выход:

Пример 2: Ширина содержимого div с использованием метода innerWidth () изменит ширину содержимого элемента, включая заполнение элемента.

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