浏览:3832008-04-12 09:55   来自龍佑康      :

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}),帶一個對象,屬性margintrue,代表外部高度和寬度計算包括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

    擁有表示偏移值topleft屬性的對象,如果參數指定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()不同之處在于可以設置參數,可以把空白邊,邊框,填充計算在內,而jQueryoffset() 只按標準計算,它相當于option{margin:true,border:false,padding:false,scroll:false}情況,得到的值包括ScrollTopScrollLeft.

 

Postion(相對位置)

$(“#elmPostionInner”).position();

相對于父元素的偏移,返回為對象{top:34,left:5}

這個沒做圖,根CSS 相對定位相似,這里注意,我們取的值是父元素邊框內邊緣到自身元素邊框上邊緣的距離。父元素內算上padding,子身元素不算上magin.

楼主

你还不是小组成员,加入小组以后才能发布新主题!
1 29195