工作忙+準備面試,好久沒有更新了。有點時間就想休息一下。
不能再墮落下去了,拖著疲憊的身體咬咬牙更新兩篇。
本來前段時間在整理關於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...