源程序:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>12.6jQuery尺寸方法</title>
<!--
jQuery 尺寸方法
jQuery 提供多个处理尺寸的重要方法：
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
-->
<script src="js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
/*
jQuery width() 和 height() 方法
width()方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height()方法设置或返回元素的高度（不包括内边距、边框或外边距）。
下面的例子返回指定的 <div> 元素的宽度和高度：
*/
$('#btn1').click(function(){
var txt="";
txt+="div 的宽度是: " + $("#div1").width() + "<br>";
txt+="div 的高度是: " + $("#div1").height();
$("#div1").html(txt);
});
/*
jQuery innerWidth()和innerHeight()方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
*/
$('#btn2').click(function(){
var txt="";
txt+="div 的宽度是: " + $("#div1").innerWidth() + "<br>";
txt+="div 的高度是: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
/*
jQuery outerWidth() 和 outerHeight() 方法
outerWidth()方法返回元素的宽度（包括内边距和边框）。
outerHeight()方法返回元素的高度（包括内边距和边框）。
*/
$('#btn3').click(function(){
var txt="";
txt+="div 的宽度是: " + $("#div1").outerWidth() + "<br>";
txt+="div 的高度是: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
});
</script>
<style>
#div1{
width:200px;
height:200px;
padding:10px;
border:20px solid red;
margin:30px;
}
</style>
</head>
<body>
<div id="div1"></div>
<input type="button" id="btn1" value="显示 width()和height() 尺寸"><br>
<input type="button" id="btn2" value="显示 innerWidth()和innerHeight() 尺寸"><br>
<input type="button" id="btn3" value="显示 outerWidth()和outerHeight() 尺寸"><br>
</body>
</html>
运行效果：
