javascript教程系列46: JS三大系列-方便的offset 家族

標籤：ima   info   parent   java   常用   style   距離   font   位置   

1 offset 家族

offset這個單詞本身是--位移，補償，位移的意思。 js中有一套方便的擷取元素尺寸的辦法就是offset家族；

2  offset 結構介紹為:

 

3 offset常用屬性

1 offsetWidth offsetHeight 得到對象的寬度和高度(自己的，與他人無關)

offsetWidth = width+padding+border

2 offsetLeft  offsetTop 返回距離上級盒子（帶有定位）左邊的位置 如果父級都沒有定位則以body 為準

offsetLeft 從父親的padding 開始算 父親的border 不算

3 offsetParent：

-1 返回改對象的父級 （帶有定位） 如果當前元素的父級元素沒有進行CSS定位 （position為absolute或relative，fixed）， offsetParent為body。

-2 如果當前元素的父級元素中有CSS定位 （position為absolute或relative，fixed）， offsetParent取最近的那個父級元素。

4  offsetTop & style.top 的區別

-1  最大區別在於 offsetTop 可以返回沒有定位 盒子 的距離左側的位置。 而 style.top 不可以

-2  offsetTop 返回的是數字，而 style.top 返回的 是字 符串，除了數字外還帶有單位：px。

-3  offsetTop 唯讀，而 style.top 可讀寫。

-4  如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是Null 字元串。

 

javascript教程系列46: JS三大系列-方便的offset 家族