Document
& Window Dimensions
$(window).height();
高度為瀏覽器窗口的高,相當與最后一個工具欄下部,到狀態欄上部的距離。
$(document).height();
高度相當與整個HTML文檔的總高度,可以小于window高度,也可能大于window高度。改變瀏覽器尺寸的時候,window高度會發生改變,而document高度是不改變的。
$(window).width();
窗口的寬度
$(document).width();
文檔的寬度
上面的操作不包括滾動條的寬度和高度。
Element Width&Height
盒模型對象分四個區域,對象實際區域,padding區,border區,margin區
$(“#elmDim”).height();
$(“#elmDim”).width();
代表元素實際的高和寬,在上圖中顯示結果,高為29,寬為200
$(“#elmDim”).innerWidth();
$(“#elmDim”).innerHeight();
代表元素padding+實際區域的高和寬,在上圖中顯示結果,高為29+5+5=39,寬為200+5+5=210
$(“#elmDim”).outWidth();
$(“#elmDim”).outWidth({margin:true});
$(“#elmDim”).outHeight();
$(“#elmDim”).outHeight({margin:true});
outWidth(),沒有參數,默認取padding+border+實際區域的寬,高度也相同,在上圖中顯示結果,高為3+5+29+5+3=45,寬為3+5+200+5+3=216。
OutWidth({margin:true}),帶一個對象,屬性margin為true,代表外部高度和寬度計算包括margin,
上圖數據結果,高為5+3+5+29+5+3+5=55,寬為5+3+5+200+5+3+5=226
Scroll Offsets(滾動偏移)

$(“#elmScroll”).scrollTop(50);
$(“#elmScroll”).scrollTop();
滾動偏移到Top的距離為50,相當于內部對象上部隱藏50px,效果如下圖,沒有參數是獲得偏移值,下圖將獲得50,有參數返回當前Jquery對象。

$(“#elmScroll”).scrollLeft(50);
$(“#elmScroll”).scrollLeft();
滾動偏移到Left的距離。跟scrollTop相似。
Offset(偏移)
Offset就一個函數jQeury.offset(options),參數options可以有可無
官方解釋:獲得一個元素相對于viewport(視口)的位置。為了精確計算margins,borders,和padding的像素值。只能用于可見元素。
返回:object
擁有表示偏移值top和left屬性的對象,如果參數指定scroll:true,將返回更多的兩個屬性scrollTop 和
scrollLeft,表示滾動偏移位置。
參數:options對象,配置偏移計算的方式
margin(Boolean),是否將元素的空白邊納入計算。默認:true;
border(Boolean),是否將元素的邊框納入計算,默認:False;
padding(Boolean),是否將元素的填充納入計算,默認:False;
scroll(Boolean),是否計算元素的滾動偏移,默認:True;
lite (Boolean) 這個參數沒有看明白,而且實例發現IE6下和FF下有出入
When true it will bypass the browser normalizations like when dealing with
borders and margins on parent elements. This provides a nice boost in
performance but at the price of accuracy. False by default.
$(“#elmOffset”).offset();
$(“#elmOffset”).offset({border:true,margin:true});
…
跟jQuery核心庫的offset()不同之處在于可以設置參數,可以把空白邊,邊框,填充計算在內,而jQuery的offset()
只按標準計算,它相當于option:{margin:true,border:false,padding:false,scroll:false}情況,得到的值包括ScrollTop和ScrollLeft.
Postion(相對位置)
$(“#elmPostionInner”).position();
相對于父元素的偏移,返回為對象{top:34,left:5}
這個沒做圖,根CSS 相對定位相似,這里注意,我們取的值是父元素邊框內邊緣到自身元素邊框上邊緣的距離。父元素內算上padding,子身元素不算上magin.