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>
效果演示：
尺寸.gif
注意： 从上面的演示可以看到，width()/height() 和 innerWidth()/innerHeight() 均比正常值多出 0.4px，笔者是在 1920x1080 的屏幕上演示的，而在 1366x768 的屏幕上则没有此问题。
网友评论