零.前言
JQuery(一)---【JQuery简介、安装、初步使用、各种事件】-CSDN博客
JQuery(二)---【使用JQuery对HTML、CSS进行操作】-CSDN博客
一.JQuery动态设置浏览器窗口尺寸大小
1.1width()和height()方法
- width()：设置或者返回元素的宽度(不包括内边距、边框或外边距)
- height()：设置或者返回元素的高度(不包括内边距、边框或外边距)
一个返回元素宽度和高度的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.n{
font-weight: bold;
font-size: large;
}
.color{
color: blue;
}
</style>
</head>
<body>
<div style="height: 300px;width: 200px;background-color: aqua;" id="div1">
<p id="text1"></p>
<p id="text2"></p>
</div>
<button id="bt1">点我显示div的宽度和高度</button>
<script>
$(document).ready(function(){
$("#bt1").click(function(){
$("#text1").text("div的宽度是:" + $("#div1").width());
$("#text2").text("div的高度是:" + $("#div1").height());
})
});
</script>
</body>
</html>效果：
一个设置元素“高度和宽度”的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.n{
font-weight: bold;
font-size: large;
}
.color{
color: blue;
}
</style>
</head>
<body>
<div style="height: 300px;width: 200px;background-color: aqua;" id="div1">
</div>
<br><br>
<button id="bt1">点我更改div的高度和宽度</button>
<script>
$(document).ready(function(){
$("#bt1").click(function(){
$("#div1").width(500).height(200);
})
});
</script>
</body>
</html>点击前：
点击后：
1.2innerWidth()和innerHeight()方法
- innerWidth() ：返回元素的宽度（包括内边距）
- innerHeight() ：返回元素的高度（包括内边距）
一个例子：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height() + "</br>";
txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height of div: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>innerWidth() - 返回元素的宽度（包括内边距）。</p>
<p>innerHeight() - 返回元素的高度（包括内边距）。</p>
</body>
</html>效果：
注意：
“可以看到使用innerWitdth和innerHeight的大小都基于width和height的基础上加了两个内边距的长度”
原因很简单，因为内边距分为：“上下左右”四个方向，因此要加两个内边距！
1.3outerWidth和outerHeight
- outerWidth() ：返回元素的宽度（包括内边距和边框)
- outerHeight() ：返回元素的高度（包括内边距和边框）
- outerWidth(true) ：返回元素的宽度（包括内边距、边框和外边距）
- outerHeight(true) ：返回元素的高度（包括内边距、边框和外边距）
一个outer不带(true)的例子：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height() + "</br>";
txt+="Outer width of div: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height of div: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>outerWidth() - 返回元素的宽度（包括内边距和边框）。</p>
<p>outerHeight() - 返回元素的高度（包括内边距和边框）。</p>
</body>
</html>效果：
可以看到结果：“高度/宽度+内边距+边框”的长度
一个outer带(true)的例子
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height() + "</br>";
txt+="Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>";
txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。</p>
<p>outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。</p>
</body>
</html>效果：
可以看到结果：“高度/宽度+内边距+边框+外边距”的长度