# jQuery - 尺寸 **通過 jQuery，很容易處理元素和瀏覽器窗口的尺寸。** ## jQuery 尺寸 方法 jQuery 提供多個處理尺寸的重要方法： * width() * height() * innerWidth() * innerHeight() * outerWidth() * outerHeight() ## jQuery width() 和 height() 方法 width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。 height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。 下面的例子返回指定的 &lt;div&gt; 元素的寬度和高度： ### 實例 ``` $("button").click(function(){ var txt=""; txt+="Width: " + $("#div1").width() + "</br>"; txt+="Height: " + $("#div1").height(); $("#div1").html(txt); }); ``` ## jQuery innerWidth() 和 innerHeight() 方法 innerWidth() 方法返回元素的寬度（包括內邊距）。 innerHeight() 方法返回元素的高度（包括內邊距）。 下面的例子返回指定的 &lt;div&gt; 元素的 inner-width/height： ### 實例 ``` $("button").click(function(){ var txt=""; txt+="Inner width: " + $("#div1").innerWidth() + "</br>"; txt+="Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt); }); ``` ## jQuery outerWidth() 和 outerHeight() 方法 outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。 outerHeight() 方法返回元素的高度（包括內邊距和邊框）。 下面的例子返回指定的 &lt;div&gt; 元素的 outer-width/height： ### 實例 ``` $("button").click(function(){ var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt); }); ``` outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框和外邊距）。 outerHeight(true) 方法返回元素的高度（包括內邊距、邊框和外邊距）。 ### 實例 ``` $("button").click(function(){ var txt=""; txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>"; txt+="Outer height (+margin): " + $("#div1").outerHeight(true); $("#div1").html(txt); }); ``` ## jQuery - 更多的 width() 和 height() 下面的例子返回文檔（HTML 文檔）和窗口（瀏覽器視口）的寬度和高度： ### 實例 ``` $("button").click(function(){ var txt=""; txt+="Document width/height: " + $(document).width(); txt+="x" + $(document).height() + "\n"; txt+="Window width/height: " + $(window).width(); txt+="x" + $(window).height(); alert(txt); }); ``` 下面的例子設置指定的 &lt;div&gt; 元素的寬度和高度： ### 實例 ``` $("button").click(function(){ $("#div1").width(500).height(500); }); ``` ## jQuery CSS 參考手冊 如需關于 jQuery Dimensions 的完整參考，請訪問我們的 jQuery 尺寸參考手冊。