jQuery 提供多个处理尺寸的重要方法：
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
下面的例子返回指定的 <div> 元素的宽度和高度：
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> |
| </script> |
| <script> |
| $(document).ready(function(){ |
| $("button").click(function(){ |
| var txt=""; |
| txt+="Width of div: " + $("#div1").width() + "</br>"; |
| txt+="Height of div: " + $("#div1").height(); |
| $("#div1").html(txt); |
| }); |
| }); |
| </script> |
| </head> |
| <body> |
| <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> |
| <br> |
| <button>显示 div 元素的尺寸</button> |
| <p>width() - 返回元素的宽度</p> |
| <p>height() - 返回元素的高度</p> |
| </body> |
| </html> |
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
下面的例子返回指定的 <div> 元素的 inner-width/height：
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> |
| </script> |
| <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(); |
| $("#div1").html(txt); |
| }); |
| }); |
| </script> |
| </head> |
| <body> |
| <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> |
| <br> |
| <button>显示 div 元素的尺寸</button> |
| <p>innerWidth() - 返回元素的宽度 (包含内边距)。</p> |
| <p>innerHeight() - 返回元素的高度 (包含内边距)。</p> |
| </body> |
| </html> |
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
下面的例子返回指定的 <div> 元素的 outer-width/height：
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> |
| </script> |
| <script> |
| $(document).ready(function(){ |
| $("button").click(function(){ |
| var txt=""; |
| txt+="div 宽度: " + $("#div1").width() + "</br>"; |
| txt+="div 高度: " + $("#div1").height() + "</br>"; |
| txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>"; |
| txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight(); |
| $("#div1").html(txt); |
| }); |
| }); |
| </script> |
| </head> |
| <body> |
| <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> |
| <br> |
| <button>显示 div 元素的尺寸</button> |
| <p>outerWidth() - 返回元素的宽度 (包含内边距和边框)。</p> |
| <p>outerHeight() - 返回元素的高度 (包含内边距和边框)。</p> |
| </body> |
| </html> |
