jQuery 中提供了一系列的 HTML DOM 操作的方法，比起原生 JavaScript 的 DOM 操作，顯得更加地簡便。
jQuery 中提供了獲取元素的尺寸（寬度和高度）的方法，這些方法獲取的尺寸不盡相同，下面就將這些方法進行介紹。
width()/height()
width()： 設置或返回元素的寬度（不包括 padding、border 和 margin）；
height()： 設置或返回元素的高度（不包括 padding、border 和 margin）。
innerWidth()/innerHeight()
innerWidth()： 設置或返回元素的寬度（包括 padding，不包括 border 和 margin）；
innerHeight()： 設置或返回元素的高度（包括 padding，不包括 border 和 margin）。
outerWidth()/outerHeight()
outerWidth()： 設置或返回元素的寬度（包括 padding 和 border，不包括 margin）；
outerHeight()： 設置或返回元素的高度（包括 padding 和 border，不包括 margin）。
outerWidth(true)/outerHeight(true)
outerWidth(true)： 設置或返回元素的寬度（包括 padding、border 和 margin）；
outerHeight(true)： 設置或返回元素的高度（包括 padding、border 和 margin）。
下面看一個例子，div 的 width=400px，height=400px，border=5px，padding=10px，margin=15px。
代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>尺寸</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
width: 400px;
height: 400px;
background-color: yellow;
border: 5px solid red;
padding: 10px;
margin: 15px;
}
</style>
</head>
<body>
<div id="div1"></div>
<button id="btn1">width/height</button>
<button id="btn2">innerWidth/innerHeight</button>
<button id="btn3">outerWidth/outerHeight</button>
<button id="btn4">outerWidth(true)/outerHeight(true)</button>
<script>
$(function () {
// width()：設置或返回元素的寬度（不包括 padding、border 和 margin）。
// height()：設置或返回元素的高度（不包括 padding、border 和 margin）。
$("#btn1").click(function () {
alert("width: " + $("#div1").width() + ", height: " + $("#div1").height());
});
// innerWidth()：設置或返回元素的寬度（包括 padding，不包括 border 和 margin）。
// innerHeight()：設置或返回元素的高度（包括 padding，不包括 border 和 margin）。
$("#btn2").click(function () {
alert("innerWidth: " + $("#div1").innerWidth() + ", innerHeight: " + $("#div1").innerHeight());
});
// outerWidth()：設置或返回元素的寬度（包括 padding 和 border，不包括 margin）。
// outerHeight()：設置或返回元素的高度（包括 padding 和 border，不包括 margin）。
$("#btn3").click(function () {
alert("outerWidth: " + $("#div1").outerWidth() + ", outerHeight: " + $("#div1").outerHeight());
});
// outerWidth(true)：設置或返回元素的寬度（包括 padding、border 和 margin）。
// outerHeight(true)：設置或返回元素的高度（包括 padding、border 和 margin）。
$("#btn4").click(function () {
alert("outerWidth(true): " + $("#div1").outerWidth(true) + ", outerHeight(true): " + $("#div1").outerHeight(true));
});
});
</script>
</body>
</html>
效果演示：
注意： 從上面的演示可以看到，width()/height() 和 innerWidth()/innerHeight() 均比正常值多出 0.4px，筆者是在 1920x1080 的屏幕上演示的，而在 1366x768 的屏幕上則沒有此問題。
