在為 jTool 提供 offset (獲取當前節點位置）方法時， 先后使用了兩種方式進行實現， 現整理出來以作記錄。
前后共使用了兩種方式實現了該方法， 這里將這兩種方法分別列出。
通過遞歸實現
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: 繼續遞歸父節點 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); }}// 執行offsetvar s_kw_wrap = document.querySelector('#s_kw_wrap');offset(s_kw_wrap); // => Object {top: 181, left: 400}通過ClientRect實現
function offset2(node) { var offest = { top: 0, left: 0 }; // 當前為IE11以下, 直接返回{top: 0, left: 0} if (!node.getClientRects().length) { return offest; } // 當前DOM節點的 display === 'node' 時, 直接返回{top: 0, left: 0} if (window.getComputedStyle(node)['display'] === 'none') { return offest; } // Element.getBoundingClientRect()方法返回元素的大小及其相對于視口的位置。 // 返回值包含了一組用于描述邊框的只讀屬性――left、top、right和bottom，單位為像素。除了 width 和 height 外的屬性都是相對于視口的左上角位置而言的。 // 返回如{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 };}// 執行offsetvar s_kw_wrap = document.querySelector('#s_kw_wrap');offset2(s_kw_wrap); // => Object {top: 181.296875, left: 399.5}offset2() 函數中使用到了 .getClientRects() 與 .getBoundingClientRect() 方法，IE11 以下瀏覽器并不支持; 所以該種實現， 只適于現代瀏覽器。
.getClientRects()
返回值是 ClientRect 對象集合(與該元素相關的CSS邊框)，每個 ClientRect 對象包含一組描述該邊框的只讀屬性――left、top、right 和 bottom，單位為像素，這些屬性值是相對于視口的top-left的。
并包含 length 屬性， IE11以下可以通過是否包含 length 來驗證當前是否為IE11以上版現。
.getBoundingClientRect()
返回值包含了一組用于描述邊框的只讀屬性――left、top、right 和 bottom，單位為像素。除了 width 和 height 外的屬性都是相對于視口的左上角位置而言的。
.getBoundingClientRect() 與 .getClientRects()的關系
提示
以上測試， 可以通過在百度首頁執行進行測試， document.querySelect('#s_kw_wrap') 所獲取到的節點為百度首頁輸入框
希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
