這篇文章主要介紹原生js怎么實(shí)現(xiàn)offset方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
在為 jTool 提供 offset (獲取當(dāng)前節(jié)點(diǎn)位置）方法時(shí)， 先后使用了兩種方式進(jìn)行實(shí)現(xiàn)， 現(xiàn)整理出來(lái)以作記錄。
前后共使用了兩種方式實(shí)現(xiàn)了該方法， 這里將這兩種方法分別列出。
通過(guò)遞歸實(shí)現(xiàn)
重慶分公司
重慶分公司
function offset(element) {
var offest = {
top: 0,
left: 0
};
var _position;
getOffset(element, true);
return offest;
// 遞歸獲取 offset, 可以考慮使用 getBoundingClientRect
function getOffset(node, init) {
// 非Element 終止遞歸
if (node.nodeType !== 1) {
return;
}
_position = window.getComputedStyle(node)['position'];
// position=static: 繼續(xù)遞歸父節(jié)點(diǎn)
if (typeof(init) === 'undefined' && _position === 'static') {
getOffset(node.parentNode);
return;
}
offest.top = node.offsetTop + offest.top - node.scrollTop;
offest.left = node.offsetLeft + offest.left - node.scrollLeft;
// position = fixed: 獲取值后退出遞歸
if (_position === 'fixed') {
return;
}
getOffset(node.parentNode);
}
}// 執(zhí)行offset
var s_kw_wrap = document.querySelector('#s_kw_wrap');
offset(s_kw_wrap); // => Object {top: 181, left: 400}通過(guò)ClientRect實(shí)現(xiàn)
function offset2(node) {
var offest = {
top: 0,
left: 0
};
// 當(dāng)前為IE11以下, 直接返回{top: 0, left: 0}
if (!node.getClientRects().length) {
return offest;
}
// 當(dāng)前DOM節(jié)點(diǎn)的 display === 'node' 時(shí), 直接返回{top: 0, left: 0}
if (window.getComputedStyle(node)['display'] === 'none') {
return offest;
}
// Element.getBoundingClientRect()方法返回元素的大小及其相對(duì)于視口的位置。
// 返回值包含了一組用于描述邊框的只讀屬性——left、top、right和bottom，單位為像素。除了 width 和 height 外的屬性都是相對(duì)于視口的左上角位置而言的。
// 返回如{top: 8, right: 1432, bottom: 548, left: 8, width: 1424…}
offest = node.getBoundingClientRect();
var docElement = node.ownerDocument.documentElement;
return {
top: offest.top + window.pageYOffset - docElement.clientTop,
left: offest.left + window.pageXOffset - docElement.clientLeft
};
}// 執(zhí)行offset
var s_kw_wrap = document.querySelector('#s_kw_wrap');
offset2(s_kw_wrap); // => Object {top: 181.296875, left: 399.5}offset2() 函數(shù)中使用到了 .getClientRects() 與 .getBoundingClientRect() 方法，IE11 以下瀏覽器并不支持; 所以該種實(shí)現(xiàn)， 只適于現(xiàn)代瀏覽器。
.getClientRects()
返回值是 ClientRect 對(duì)象集合(與該元素相關(guān)的CSS邊框)，每個(gè) ClientRect 對(duì)象包含一組描述該邊框的只讀屬性——left、top、right 和 bottom，單位為像素，這些屬性值是相對(duì)于視口的top-left的。
并包含 length 屬性， IE11以下可以通過(guò)是否包含 length 來(lái)驗(yàn)證當(dāng)前是否為IE11以上版現(xiàn)。
.getBoundingClientRect()
返回值包含了一組用于描述邊框的只讀屬性——left、top、right 和 bottom，單位為像素。除了 width 和 height 外的屬性都是相對(duì)于視口的左上角位置而言的。
.getBoundingClientRect() 與 .getClientRects()的關(guān)系
這兩個(gè)方法的區(qū)別與當(dāng)前的 display 相關(guān)， 當(dāng) display=inline 時(shí)， .getClientRects() 返回當(dāng)前節(jié)點(diǎn)內(nèi)每一行文本的 ClientRect 對(duì)象數(shù)組， 此時(shí)數(shù)組長(zhǎng)度等于文本行數(shù)。
當(dāng) display != inline 時(shí)， .getClientRects() 返回當(dāng)前節(jié)點(diǎn)的 ClientRect 對(duì)象數(shù)組，此時(shí)數(shù)組長(zhǎng)度為1.
.getBoundingClientRect() 總是返回當(dāng)前節(jié)點(diǎn)的 ClientRect 對(duì)象， 注意這里是 ClientRect 對(duì)象而不是對(duì)象數(shù)組。
以上是“原生js怎么實(shí)現(xiàn)offset方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
