JS學習筆記 offset家族

2021-09-01 22:15:48 字數 912 閱讀 7874

js有很多操作是需要尺寸的具體值的,只靠人工的去計算效率是非常低的,但是offset家族的存在就完美的解決了這個問題,下面我們來看看它常見的幾個用法:

offsetheight  = 內容 + 內邊距 + 邊框,offsetwidth也是這個計算公式,這兩個可以準確的計算當前盒子的元素大小

它們會返回當前盒子距離帶有定位的父元素的尺寸長度,如果沒有父元素沒有定位,那麼它會一級一級往上找,一直到找到帶定位的元素或者找到body。

注意:返回的長度不包含border的長度,也就是它們是計算子元素最外邊框到父元素最內邊框的距離

1、返回改物件的父級 (帶有定位)

如果當前元素的父級元素沒有進行css定位 (position為absolute或  relative,fixed),    offsetparent為body。

2、如果當前元素的父級元素中有css定位      (position為absolute或 relative,fixed),    offsetparent取最近的那個父級元素。

a) style.left只能獲取行內的,而offsetleft則可以獲取到所有的;

b) offsetleft 可以返回沒有定位盒子距離左側的位置;而style.left不可以,其只能返回有定位盒子的left;

c) offsetleft 返回的是數字,而 style.left 返回的是字串,除了數字外還帶有單位:px;

注意:可以用parseint進行轉化;比如:styleleft='300px' ---> parseint(stylelft) ---> 300

d) offsetleft是唯讀的,而style.left是可讀寫;

e) 如果沒有給 當前 元素指定過 top 樣式,則 style.top 返回的是空字串,而offset***就算沒有設定也會返回

很明顯offset家族就是為子絕父相服務的。

第7章offset家族

offset這個單詞本身是 偏移,補償,位移的意思。js中有一套方便的獲取元素尺寸的辦法就是 offset 家族 offsetwidth和 offsethight 以及offsetleft 和offsettop 以及offsetparent 共同組成了offset 家族。這兩個屬性,他們繫結在了所有...

offset三大家族

offset家族 1.1 三大家族和乙個事件物件 三大家族 offset scroll client 事件物件 event 事件被觸動時,滑鼠和鍵盤的狀態 通過屬性控制 1.2 offset家族簡介 offset這個單詞本身是 偏移,補償,位移的意思。js中有一套方便的獲取元素尺寸的辦法就是offs...

JavaScript學習筆記(二)之JS家族

三大系列 offset scroll client 事件物件 event 事件被觸動時,滑鼠和鍵盤的狀態 通過屬性控制 三大系列都是以dom元素節點的屬性形式存在的。模擬訪問關係,也是以屬性形式存在。不同點在於,訪問關係是為了獲取其他節點,而三大系列是為了獲取元素節點更多的資訊。1.主要針對情況 滾...