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來獲得絕對偏移。
復(fù)制代碼 代碼如下:
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里的值
}
使用時，則如：
復(fù)制代碼 代碼如下:
var a = document.getElementById('a');
//getOffset(a).top
//getOffset(a).left
//getOffset(a).top
//getOffset(a).left
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)加載進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript實現(xiàn)的仿新浪微博原生態(tài)輸入字數(shù)即時檢查功能【兼容IE6】
這篇文章主要介紹了JavaScript實現(xiàn)的仿新浪微博原生態(tài)輸入字數(shù)即時檢查功能,涉及javascript事件響應(yīng)及字符串的遍歷、轉(zhuǎn)換、判斷等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
javascript完整操作Table的增加行，刪除行的列子大全
非常漂亮的js操作table行代碼函數(shù)。比較方便2008-10-10
css輕松實現(xiàn)整站樣式互相切換。需要的朋友可以過來參考下，希望對大家有所幫助2013-10-10
JavaScript中Object、map、weakmap的區(qū)別分析
這篇文章主要介紹了JavaScript中Object、map、weakmap的區(qū)別分析，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
JSON一種簡單的數(shù)據(jù)格式，比xml更輕巧，在JavaScript中處理JSON數(shù)據(jù)不需要任何特殊的API或工具包，下面為大家詳細介紹下js中的json對象2014-10-10
JSON序列化與解析原生JS方法且IE6和chrome測試通過
JSON序列化與解析本文通過原生JS方法實現(xiàn)，IE6和chrome下均測試通過，喜歡的朋友可以嘗試操作下2013-09-09
如何寫一個通用的JavaScript效果庫！(2/2)...2007-04-04
詳解如何使用JavaScript中Promise類實現(xiàn)并發(fā)任務(wù)控制
在JavaScript中,Promise是一種用于管理異步操作的強大工具,但是,有時候需要更高級的控制,以限制同時執(zhí)行的任務(wù)數(shù)量,以避免系統(tǒng)資源超負荷,本文將深入探討JavaScript中的并發(fā)任務(wù)控制,并介紹如何創(chuàng)建一個自定義的Promise類——ConcurrentPromise2023-08-08
JS將指定的某個字符全部轉(zhuǎn)換為其他字符實例代碼
這篇文章主要給大家介紹了關(guān)于JS如何將指定的某個字符全部轉(zhuǎn)換為其他字符的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10