jQuery 尺寸

通(tōng)過 jQuery，很(hěn)容易處理元素和(hé)浏覽器窗口的尺寸。

jQuery 尺寸 方法

jQuery 提供多個處理尺寸的重要(yào)方法：

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

jQuery width() 和(hé) height() 方法

width() 方法設置或返回元素的寬度（不包括內(nèi)邊距、邊框或外(wài)邊距）。

height() 方法設置或返回元素的高度（不包括內(nèi)邊距、邊框或外(wài)邊距）。

下(xià)面的例子返回指定的 <div> 元素的寬度和(hé)高度：

實例

$("button").click(function(){

var txt="";

txt+="Width: " + $("#div1").width() + "</br>";

txt+="Height: " + $("#div1").height();

$("#div1").html(txt);

});

jQuery innerWidth() 和(hé) innerHeight() 方法

innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）。

innerHeight() 方法返回元素的高度（包括內(nèi)邊距）。

下(xià)面的例子返回指定的 <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() 和(hé) outerHeight() 方法

outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和(hé)邊框）。

outerHeight() 方法返回元素的高度（包括內(nèi)邊距和(hé)邊框）。

下(xià)面的例子返回指定的 <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) 方法返回元素的寬度（包括內(nèi)邊距、邊框和(hé)外(wài)邊距）。

outerHeight(true) 方法返回元素的高度（包括內(nèi)邊距、邊框和(hé)外(wài)邊距）。

實例

$("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() 和(hé) height()

下(xià)面的例子返回文檔（HTML 文檔）和(hé)窗口（浏覽器視(shì)口）的寬度和(hé)高度：

實例

$("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);

});

下(xià)面的例子設置指定的 <div> 元素的寬度和(hé)高度：

實例

$("button").click(function(){

$("#div1").width(500).height(500);

});