极客教程如何用jQuery动态地设置一个div元素的高度和宽度
使用jQuery设置一个div元素的高度
div的内容高度可以根据用户需求使用height()、innerHeight()和outerHeight()方法动态设置或改变。如果用户想动态地改变一个div的内容高度，它包括改变实际高度、带填充的实际高度以及带填充和边框的实际高度，那么用户可以使用以下任何一种方法来动态地设置一个元素的内容高度。
- 使用height()方法
- 使用innerHeight()方法
- 使用outerHeight()方法
例子1： div的内容高度使用height()方法将改变一个元素的内容高度，不包括元素的padding、border和margin。
<!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>
HTML
输出:
示例2： div的内容高度使用innerHeight()方法将改变元素的内容高度，包括元素的padding。
<!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>
HTML
输出:
示例3： div的内容高度使用outerHeight()方法将改变一个元素的内容高度，包括元素的padding和border。
<!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>
HTML
输出:
使用jQuery设置一个div元素的宽度
div的内容宽度可以根据用户需求使用width()、innerWidth()和outerWidth()方法动态设置或改变。如果用户想动态地改变一个div的内容宽度，它包括改变实际宽度、带填充的实际宽度以及带填充和边框的实际宽度，那么用户可以使用以下任何一种方法来动态地设置一个元素的内容宽度。
- 使用width()方法
- 使用innerWidth()方法
- 使用outerWidth()方法
例子1： div的内容宽度使用width()方法将改变元素内容的宽度，不包括元素的padding、border和margin。
<!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>
HTML
输出:
示例2： div的内容宽度使用innerWidth()方法将改变一个元素的内容宽度，包括元素的填充。
<!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>
HTML
输出:
示例3： div的内容宽度使用outerWidth()方法将改变元素内容的宽度，包括元素的padding和border。
<!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>
HTML
输出:
jQuery是一个开源的JavaScript库，它简化了HTML/CSS文档之间的交互，它以其 “少写多做 “的理念而广为人知。