关于jquery尺寸的总结
以前总是对jquery的尺寸稀里糊涂，有需要的可以看下下面的代码：
①页面布局如下：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>jquery尺寸练习</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <style> .div1 { width:360px; height:300px; background:pink; border:2px solid #000; margin:10px; padding: 20px; line-height: 24px; } </style> </head> <body> <div class="div1"></div> <button>显示 div 元素的尺寸</button> <p>总结如下：</p> <p>width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。</p> <p>height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。</p> <p>innerWidth() 方法返回元素的宽度（包括内边距）。</p> <p>innerHeight() 方法返回元素的高度（包括内边距）。</p> <p>outerWidth() 方法返回元素的宽度（包括内边距和边框）。</p> <p>outerHeight() 方法返回元素的高度（包括内边距和边框）。</p> <p>outerHeight(true) 方法返回元素的高度（包括内边距和边框、外边距）。</p> <p>outerHeight(true) 方法返回元素的高度（包括内边距和边框、外边距）。</p> </body> </html>
②javascript代码如下：
<script> $(document).ready(function(){ $("button").click(function(){ var txt = ''; txt+="div 宽度:"+$(".div1").width()+"<br/>"; txt += "div 高度:"+$(".div1").height()+"<br/>"; txt +="div 宽度，包含内边距:"+$(".div1").innerWidth()+"<br>"; txt+="div 高度，包含内边距:"+$(".div1").innerHeight()+"<br>"; txt +="div 宽度，包含内边距和边框:"+$(".div1").outerWidth()+"<br>"; txt+="div 高度，包含内边距和边框:"+$(".div1").outerHeight()+"<br>"; txt +="div 宽度，包含内边距、边框和外边距:"+$(".div1").outerWidth(true)+"<br>"; txt+="div 高度，包含内边距、边框和外边距:"+$(".div1").outerHeight(true)+"<br>"; $(".div1").html(txt); }); }); </script>
这次将尺寸理解明白，很感谢菜鸟教程这个网站，这是一个很不错的网站，适合新手入门。我很多不懂的东西都是通过这个网站学习的。另外附上一张尺寸图，如下：
最后，还是要多敲代码，即使是你能看懂的代码，有时候能看得懂当自己敲的时候不一定能敲出来。
