返回元素的寬、高。
width() height()
返回元素的寬、高（包括內邊距）。
innerWidth() innerHeight()
返回元素的寬度（包括內邊距和邊框）。
outerWidth() outerHeight()
返回元素的寬度（包括內邊距、邊框和外邊距）
outerWidth(true) outerHeight(true)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
width: 100px;
height: 100px;
padding: 100px;
margin: 100px;
border: 10px solid #00FFFF;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1"></div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function () {
var div = $(".div1");
// 返回元素的寬、高
var width = div.width();
var height = div.height();
console.log("寬度:" + width + " 高度:" + height);
// 返回元素的寬、高（包括內邊距）
var innerWidth = div.innerWidth();
var innerHeight = div.innerHeight();
console.log("包括內邊距 寬度:" + innerWidth + " 高度:" + innerHeight);
// 返回元素的高度（包括內邊距和邊框）
var outerWidth = div.outerWidth();
var outerHeight = div.outerHeight();
console.log("包括內邊距和邊框 寬度:" + outerWidth + " 高度:" + outerHeight);
// 返回元素的高度（包括內邊距、邊框和外邊距）
var outerWidthTrue = div.outerWidth(true);
var outerHeightTrue = div.outerHeight(true);
console.log("包括內外邊距和邊框 寬度:" + outerWidthTrue + " 高度:" + outerHeightTrue);
});
</script>
</body>
</html>運行結果：
