jQuery 提供多个处理尺寸的重要方法:
width()设置或返回元素的宽度(不包括内边距、边框或外边距)。
height()设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth()返回元素的宽度(包括内边距)。
innerHeight()返回元素的高度(包括内边距)。
outerWidth()返回元素的宽度(包括内边距和边框)。
outerHeight()返回元素的高度(包括内边距和边框)。
outerWidth(true)返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true)返回元素的高度(包括内边距、边框和外边距)。
依照盒模型如下图:
<script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width: " + $("#div1").width() + "px</br>"; txt+="Height: " + $("#div1").height() + "px</br>"; txt+="Inner width: " + $("#div1").innerWidth() + "px</br>"; txt+="Inner height: " + $("#div1").innerHeight()+ "px</br>"; txt+="Outer width: " + $("#div1").outerWidth() + "px</br>"; txt+="Outer height: " + $("#div1").outerHeight()+ "px</br>"; txt+="Outer width(含margin): " + $("#div1").outerWidth(true) + "px</br>"; txt+="Outer height(含margin): " + $("#div1").outerHeight(true)+"px"; $("#div1").html(txt); }); }); </script> </head> <body> <div id="div1" style="height:150px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <button>显示 div 的尺寸</button> </body>