js實現(xiàn)jquery的offset()方法實例
更新時間：2015年01月10日 10:14:53 投稿：shichen2014
這篇文章主要介紹了js實現(xiàn)jquery的offset()方法,實例分析了jquery的offset()方法原理與采用javascript實現(xiàn)的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了js實現(xiàn)jquery的offset()方法。分享給大家供大家參考。具體分析如下：
用過jQuery的offset()的同學都知道offset().top或offset().left很方便地取得元素相對于整個頁面的偏移。
而在js里，沒有這樣直接的方法，節(jié)點的屬性offsetTop可以獲得該節(jié)點相對于父節(jié)點的相對偏移，但不能直接獲得其絕對偏移，我們可用節(jié)點逐層遞歸向上來相加offsetTop來獲得絕對偏移。
復制代碼 代碼如下:
function getOffset(Node, offset) {
if (!offset) {
offset = {};
offset.top = 0;
offset.left = 0;
}
if (!offset) {
offset = {};
offset.top = 0;
offset.left = 0;
}
if (Node == document.body) {//當該節(jié)點為body節(jié)點時，結(jié)束遞歸
return offset;
}
offset.top += Node.offsetTop;
offset.left += Node.offsetLeft;
return getOffset(Node.parentNode, offset);//向上累加offset里的值
}
使用時，則如：
復制代碼 代碼如下:
var a = document.getElementById('a');
//getOffset(a).top
//getOffset(a).left
//getOffset(a).top
//getOffset(a).left
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
javascript兩種function的定義介紹及區(qū)別說明
javascript兩種function的定義方式function a(){}和a=function(){}具體使用如下，感興趣的朋友可以參考下，希望對你對你學習function的定義有所幫助2013-05-05
javascript實現(xiàn)獲取指定精度的上傳文件的大小簡單實例
下面小編就為大家?guī)硪黄猨avascript實現(xiàn)獲取指定精度的上傳文件的大小簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
本文主要介紹了JavaScript?對象的四種方式比較詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
JS提供了很多方便操作數(shù)組的方法,這篇文章主要給大家介紹了關(guān)于JS操作對象數(shù)組實現(xiàn)增刪改查的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-07-07
本篇文章主要介紹了博客內(nèi)容進度插件的實現(xiàn)方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
javascript使用eval或者new Function進行語法檢查
使用代碼來實現(xiàn)分析代碼的語法，這是一件極其痛苦的事情。簡單的解決辦法是：使用腳本引擎自己的語法檢查，比方說eval( ) 或者new Function( )。2010-10-10
JS網(wǎng)頁播放聲音實現(xiàn)代碼兼容各種瀏覽器
JS網(wǎng)頁播放聲音有多種方法可以實現(xiàn)，不過兼容各種瀏覽器的就沒有幾個了，不過本文的這個示例或許對大家有所幫助2013-09-09
正則又叫規(guī)則或模式，是一個強大的字符串匹配工具。javascript通過RegExp類型來支持正則表達式，本文給大家介紹javascript類型系統(tǒng)之正則表達式，對js正則表達式相關(guān)知識感興趣的朋友一起學習吧2016-01-01
這篇文章主要介紹了javascript顯式類型轉(zhuǎn)換,實例分析了javascript實現(xiàn)類型轉(zhuǎn)換的常用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
js中的this關(guān)鍵字平時在開發(fā)中使用時倒是也能正常應用,但是對其使用和判斷并不能信手拈來,所以下面這篇文章主要給大家介紹了關(guān)于js中this關(guān)鍵字的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07