用js實現offset方法

2021-09-25 06:03:59 字數 1432 閱讀 1499

工作忙+準備面試,好久沒有更新了。有點時間就想休息一下。

不能再墮落下去了,拖著疲憊的身體咬咬牙更新兩篇。

本來前段時間在整理關於vue元件封裝、bind實現、promise實現的文章。但是由於篇幅有點大,並且筆記有些久遠好多東西還要再更新下,所以就推遲了。就簡單整理下最近自己寫過的**中比較有代表性的例子。

如何用js實現jq中的offset方法。

jquery中的offset方法是獲取當前元素上邊框到document頂部距離的。

需要實現offset可以借助js中的offsettop、offsetleft。

js 的 offsettop、offsetleft 是用來訪問乙個 dom 節點上邊框相對其本身最近、且position值為非static的祖先元素的垂直和水平偏移量。

最後再借用遞迴就可以輕鬆實現了,**如下

const

offset

= ele =>

const

getoffset

=(node, init)

=>

// window.getcomputedstyle獲取元素的所有樣式

position = window.

getcomputedstyle

(node)

['position'

]// 如不是首次計算,並且position為static,繼續計算父級if(

typeof

(init)

==='undefined'

&& position ===

'static'

)// 減去node.scrolltop是因為,如果元素在乙個帶有滾動條的父元素內,則offsettop會獲取整個高度

// 如果滾動條不為0則需要減去已滾動的部分。

result.top += node.offsettop - node.scrolltop

result.left += node.offsetleft - node.scrollleft

if(position ===

'fixed'

)// 遞迴呼叫

getoffset

(node.parentnode)

}// 當前 dom 節點的 display === 'none' 時, 直接返回

if(window.

getcomputedstyle

(ele)

['display'

]===

'none'

)getoffset

(ele,

true

)return result

}

**非常簡單易懂,但是在平時開發中很少會遇到這樣的問題。不過在面試中這又是乙個高頻的考點,非常考驗js基本功。實現方法有很多,在這就列舉一種容易理解的,有興趣的小夥伴可以自己嘗試其他方式實現。

原生js實現offset方法

在為 jtool 提供 offset 獲取當前節點位置 方法時,先後使用了兩種方式進行實現,現整理出來以作記錄。function offset element var position getoffset element,true return offest 遞迴獲取 offset,可以考慮使用 g...

JS學習筆記 offset家族

js有很多操作是需要尺寸的具體值的,只靠人工的去計算效率是非常低的,但是offset家族的存在就完美的解決了這個問題,下面我們來看看它常見的幾個用法 offsetheight 內容 內邊距 邊框,offsetwidth也是這個計算公式,這兩個可以準確的計算當前盒子的元素大小 它們會返回當前盒子距離帶...

用js實現複製

const copyele document.queryselector contenttext 獲取要複製的節點 const range document.createrange 創造range window.getselection removeallranges 清除頁面中已有的selecti...