上QQ阅读APP看书，第一时间看更新
4.4 更改元素或窗口的大小
通过jQuery可以很容易地处理元素和浏览器窗口的尺寸，提供以下6种方法。
● width()：设置或返回元素的宽度（不包括内边距、边框或外边距）。
● height()：设置或返回元素的高度（不包括内边距、边框或外边距）。
● innerWidth()：返回元素的宽度（包括内边距）。
● innerHeight()：返回元素的高度（包括内边距）。
● outerWidth()：返回元素的宽度（包括内边距和边框）。
● outerHeight()：返回元素的高度（包括内边距和边框）。
比较上述几种方法，可以通过图4.7了解。
图4.7 获取尺寸的对比
【示例4-4】dimension.html
01 <script>
02 $(document).ready(function(){
03 $("button").click(function(){
04 var txt = "";
05 txt += "div的宽/高： " + $("#div1").width();
06 txt += "x" + $("#div1").height() + "\n";
07 txt += "文档的宽/高： " + $(document).width();
08 txt += "x" + $(document).height() + "\n";
09 txt += "窗口的宽/高： " + $(window).width();
10 txt += "x" + $(window).height();
11 alert(txt);
12 });
13 });
14 </script>
15
16 <body>
17 <div id="div1"></div>
18 <button>高度和宽度</button>
19 </body>
20 </html>
第04～10行分别获取div、文档和窗口的宽度和高度。这里要注意div并没有设置宽度。本示例在浏览器中打开后，单击“高度和宽度”按钮，效果如图4.8所示。
图4.8 获取高度和宽度