js實(shí)現(xiàn)jquery的offset()方法實(shí)例
本文實(shí)例講述了js實(shí)現(xiàn)jquery的offset()方法。分享給大家供大家參考。具體分析如下：
用過(guò)jQuery的offset()的同學(xué)都知道offset().top或offset().left很方便地取得元素相對(duì)于整個(gè)頁(yè)面的偏移。
而在js里，沒(méi)有這樣直接的方法，節(jié)點(diǎn)的屬性offsetTop可以獲得該節(jié)點(diǎn)相對(duì)于父節(jié)點(diǎn)的相對(duì)偏移，但不能直接獲得其絕對(duì)偏移，我們可用節(jié)點(diǎn)逐層遞歸向上來(lái)相加offsetTop來(lái)獲得絕對(duì)偏移。
if (!offset) {
offset = {};
offset.top = 0;
offset.left = 0;
}
if (Node == document.body) {//當(dāng)該節(jié)點(diǎn)為body節(jié)點(diǎn)時(shí)，結(jié)束遞歸
return offset;
}
offset.top += Node.offsetTop;
offset.left += Node.offsetLeft;
return getOffset(Node.parentNode, offset);//向上累加offset里的值
}
使用時(shí)，則如：
//getOffset(a).top
//getOffset(a).left
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)加載進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript實(shí)現(xiàn)的仿新浪微博原生態(tài)輸入字?jǐn)?shù)即時(shí)檢查功能【兼容IE6】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的仿新浪微博原生態(tài)輸入字?jǐn)?shù)即時(shí)檢查功能,涉及javascript事件響應(yīng)及字符串的遍歷、轉(zhuǎn)換、判斷等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
javascript完整操作Table的增加行，刪除行的列子大全
非常漂亮的js操作table行代碼函數(shù)。比較方便2008-10-10
css輕松實(shí)現(xiàn)整站樣式互相切換。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-10-10
JavaScript中Object、map、weakmap的區(qū)別分析
這篇文章主要介紹了JavaScript中Object、map、weakmap的區(qū)別分析，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
JSON一種簡(jiǎn)單的數(shù)據(jù)格式，比xml更輕巧，在JavaScript中處理JSON數(shù)據(jù)不需要任何特殊的API或工具包，下面為大家詳細(xì)介紹下js中的json對(duì)象2014-10-10
JSON序列化與解析原生JS方法且IE6和chrome測(cè)試通過(guò)
JSON序列化與解析本文通過(guò)原生JS方法實(shí)現(xiàn)，IE6和chrome下均測(cè)試通過(guò)，喜歡的朋友可以嘗試操作下2013-09-09
如何寫(xiě)一個(gè)通用的JavaScript效果庫(kù)！(2/2)
如何寫(xiě)一個(gè)通用的JavaScript效果庫(kù)！(2/2)...2007-04-04
詳解如何使用JavaScript中Promise類(lèi)實(shí)現(xiàn)并發(fā)任務(wù)控制
在JavaScript中,Promise是一種用于管理異步操作的強(qiáng)大工具,但是,有時(shí)候需要更高級(jí)的控制,以限制同時(shí)執(zhí)行的任務(wù)數(shù)量,以避免系統(tǒng)資源超負(fù)荷,本文將深入探討JavaScript中的并發(fā)任務(wù)控制,并介紹如何創(chuàng)建一個(gè)自定義的Promise類(lèi)——ConcurrentPromise2023-08-08
JS將指定的某個(gè)字符全部轉(zhuǎn)換為其他字符實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于JS如何將指定的某個(gè)字符全部轉(zhuǎn)換為其他字符的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10