2017-09-16
摘抄自W3school-jQuery - 尺寸
希望幫助自己系統(tǒng)地打好基礎(chǔ)托猩，也能在做筆記的同時添加一些自己額外的收獲。
通過 jQuery谤祖，很容易處理元素和瀏覽器窗口的尺寸兄世。
jQuery 尺寸 方法
jQuery 提供多個處理尺寸的重要方法：
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery width() 和 height() 方法
width() 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）邻薯。
height() 方法設(shè)置或返回元素的高度（不包括內(nèi)邊距裙戏、邊框或外邊距）。
下面的例子返回指定的 <div> 元素的寬度和高度：
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）厕诡。
innerHeight() 方法返回元素的高度（包括內(nèi)邊距）累榜。
下面的例子返回指定的 <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() 方法返回元素的寬度（包括內(nèi)邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框）灵嫌。
下面的例子返回指定的 <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)邊距壹罚、邊框和外邊距）。
outerHeight(true) 方法返回元素的高度（包括內(nè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() 和 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);
});
下面的例子設(shè)置指定的 <div> 元素的寬度和高度：
$("button").click(function(){
$("#div1").width(500).height(500);
});
