jQuery - 尺寸 · W3School Javascript & jQuery 教程

# jQuery - 尺寸 **通过 jQuery，很容易处理元素和浏览器窗口的尺寸。** ## jQuery 尺寸方法 jQuery 提供多个处理尺寸的重要方法： * width() * height() * innerWidth() * innerHeight() * outerWidth() * outerHeight() ## jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。下面的例子返回指定的 <div> 元素的宽度和高度： ### 实例 ``` $("button").click(function(){ var txt=""; txt+="Width: " + $("#div1").width() + "</br>"; txt+="Height: " + $("#div1").height(); $("#div1").html(txt); }); ``` ## jQuery innerWidth() 和 innerHeight() 方法 innerWidth() 方法返回元素的宽度（包括内边距）。 innerHeight() 方法返回元素的高度（包括内边距）。下面的例子返回指定的 <div> 元素的 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() 方法返回元素的高度（包括内边距和边框）。下面的例子返回指定的 <div> 元素的 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); }); ``` 下面的例子设置指定的 <div> 元素的宽度和高度： ### 实例 ``` $("button").click(function(){ $("#div1").width(500).height(500); }); ``` ## jQuery CSS 参考手册如需关于 jQuery Dimensions 的完整参考，请访问我们的 jQuery 尺寸参考手册。