本節(jié)我們學(xué)習(xí)如何通過 jQuery 中提供的方法來獲取或者設(shè)置元素的寬度和高度。
jQuery 中用于獲取設(shè)置寬高的方法有如下所示：
| 方法 | 描述 |
|---|---|
| width() | 設(shè)置或返回元素的寬度 |
| height() | 設(shè)置或返回元素的高度 |
| innerWidth() | 返回元素的寬度，包括內(nèi)邊距 |
| innerHeight() | 返回元素的高度，包括內(nèi)邊距 |
| outerWidth() | 返回元素的寬度，包括內(nèi)邊距和邊框 |
| outerHeight() | 返回元素的高度，包括內(nèi)邊距和邊框 |
width()和height()方法
width() 方法和 height() 方法其實(shí)從字面意思就可以看出它們的作用，width() 方法用于設(shè)置或返回元素的寬度， height() 方法用于設(shè)置或返回元素的高度。
但是要注意，寬度和高度都不包括元素的內(nèi)邊距、外邊距和邊框的寬度。
示例：
例如我們獲取下面這個(gè)矩形的寬度和高度：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
var w = $(".rect").width();
var h = $(".rect").height();
alert("元素的寬為：" + w + ", 元素的高為：" + h);
});
});
</script>
<style>
.rect{
width: 300px;
height: 150px;
background-color: salmon;
}
</style>
</head>
<body>
<div class="rect"></div>
<p><button>獲取元素寬和高</button></p>
</body>
</html>
在瀏覽器中的演示效果：
除了獲取元素的寬和高，width() 方法和 height() 方法還可以用于設(shè)置元素的寬和高。
示例：
例如我們看下面這個(gè)例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$(".rect").width("300px");
$(".rect").height("150px");
});
});
</script>
<style>
.rect{
width: 50px;
height: 50px;
background-color: salmon;
}
</style>
</head>
<body>
<div class="rect"></div>
<p><button>設(shè)置元素寬和高</button></p>
</body>
</html>
上述代碼中，元素的寬和高原本為 50px，然后我們通過 width() 方法和 height() 方法將元素的寬和高設(shè)置為 300px 和 150px。當(dāng)點(diǎn)擊按鈕時(shí)，元素的寬和高發(fā)生改變。
在瀏覽器中的演示效果：
innerWidth()和 innerHeight()方法
innerWidth() 方法用于返回元素的寬度。innerHeight() 方法用于關(guān)于返回元素的高度，包括內(nèi)邊距。
注意這兩個(gè)方法返回的寬和高，包括內(nèi)邊距，但是不包括外邊距和邊框?qū)挾取?/p>
示例：
例如下面這個(gè)例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
var w = $(".rect").innerWidth();
var h = $(".rect").innerHeight();
alert("元素的寬為：" + w + "，元素的高為：" + h);
});
});
</script>
<style>
.rect{
width: 100px;
height: 100px;
background-color: salmon;
padding: 10px;
border: 5px solid #ccc;
}
</style>
</head>
<body>
<div class="rect"></div>
<p><button>獲取元素寬和高</button></p>
</body>
</html>
上述代碼中，我們?cè)O(shè)置了 rect 元素的寬和高分別為 100px，內(nèi)邊距為 10px，外邊距為 10px ，邊框?qū)挾葹?5px。因?yàn)?innerWidth() 方法返回的是元素的“寬 + 左右內(nèi)邊距”，innerHeight() 方法返回的是元素的“高 + 上下內(nèi)邊距”，我們來看一下最終結(jié)果：
outerWidth()和 outerHeight()方法
outerWidth() 方法用于返回元素的寬度，outerHeight() 方法用于返回元素的高度。這兩個(gè)方法返回的高和寬都包括元素的內(nèi)邊距和邊框?qū)挾取?/p>
示例：
我們將上面示例中的 innerWidth() 和 innerHeight() 方法改為 outerWidth() 方法和 outerHeight() 方法，看看有什么不同：
$(function(){
$("button").click(function(){
var w = $(".rect").outerWidth();
var h = $(".rect").outerHeight();
alert("元素的寬為：" + w + "，元素的高為：" + h);
});
});
在瀏覽器中的演示效果：
可以看到，使用 outerWidth() 方法和 outerHeight() 方法獲取元素的寬和高，最終輸出結(jié)果為 130px ，比上述示例中多 10px，這 10px 其實(shí)就是元素的上下邊框和左右邊框之和。
