在jQuery中，想要獲取或者設置某一個元素的寬度和高度，我們可以使用css()方法來實現。但是jQuery為我們提供了更多方便快速的方法，使得我們更加靈活地操作元素的寬度和高度。
在jQuery中，如果我們想要“獲取”或者“設置”元素的寬度，共有3種方法：
其實，這3種方法是根據盒子模型進行區分的。
對於這3種獲取或設置元素寬度的方法中，一般情況下我們只用到width()方法 ，對於其他兩種方法，了解一下即可。此外還要注意一點，只有width()方法可以用於window或document對象。
語法：
$().width() //獲取元素的寬度 $().width(n) //設置元素的寬度，n是一個整數，表示npx
說明：
width()方法和css("width")方法類似，不過width()方法獲得的寬度值不帶單位（僅僅是數字），而css("width")獲取的寬度值帶“px”作為單位，例如：
$().width(); //返回數字，例如100
$().css("width"); //返回字符串，例如“100px”
由於width()方法獲得的寬度值是一個數字，使得我們可以方便用來進行數值運算，這在元素定位、計算距離這些方面非常的有用。反而在這種時候，用css("width")就顯得很麻煩了。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#box1,#box2
{
display:inline-block;
width:100px;
height:60px;
border:1px solid gray;
}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//width()方法獲取元素的寬度
var a = $("#box1").width();
alert(a);
});
$("#btn2").click(function () {
//width()方法設置元素的寬度
$("#box2").width(50);
});
})
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div><br />
獲取第1個div的寬度：<input id="btn1" type="button" value="獲取" /><br />
設置第2個div的寬度：<input id="btn2" type="button" value="設置" />
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡要注意一下，使用width()方法對元素設置寬度時不要加單位，像width(50px)這種寫法是錯誤的，正常寫法應該是width(50)。
在jQuery中，如果我們想要“獲取”或者“設置”元素的高度，也有3種方法：
其實，這3種方法也是根據盒子模型進行區分的。
對於這3種獲取或設置元素高度的方法中，一般情況下我們只用到height()方法 ，對於其他兩種方法，同樣也是了解一下即可。此外還要注意一點，只有height()方法可以用於window或document對象。
語法：
$().height() //獲取元素的高度 $().height(n) //設置元素的高度，n是一個整數，表示npx
說明：
height()方法和width()方法的用法一樣，使用height()方法獲取元素的高度是一個數字（不帶單位）。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#box1,#box2
{
display:inline-block;
width:100px;
height:60px;
border:1px solid gray;
}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//height()方法獲取元素的高度
var a = $("#box1").height();
alert(a);
});
$("#btn2").click(function () {
//height()方法設置元素的高度
$("#box2").height(100);
});
})
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div><br />
獲取第1個div的高度：<input id="btn1" type="button" value="獲取" /><br />
設置第2個div的高度：<input id="btn2" type="button" value="設置" />
</body>
</html>
在浏覽器預覽效果如下：
分析：
總結1、對於元素的寬度和高度操作，我們一般情況下用width()和height()這2種方法就夠了，其他方法了解一下即可。
2、width()和height()使用方法相同，都可以實現2種效果：（1）獲取值；（2）設置值。這個很像我們之前學的html()、text()、val()。這一類既可以獲取值又可以設置值的方法在jQuery中很常見，大家對比理解並記憶一下。