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