摘要:通過遞歸實現遞歸獲取可以考慮使用非終止遞歸繼續遞歸父節點獲取值后退出遞歸執行通過實現當前為以下直接返回當前節點的時直接返回方法返回元素的大小及其相對于視口的位置。返回值包含了一組用于描述邊框的只讀屬性和,單位為像素。
在為 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); } } // 執行offset var 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 }; } // 執行offset var 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()的關系
這兩個方法的區別與當前的 display 相關, 當 display=inline 時, .getClientRects() 返回當前節點內每一行文本的 ClientRect 對象數組, 此時數組長度等于文本行數。
當 display != inline 時, .getClientRects() 返回當前節點的 ClientRect 對象數組,此時數組長度為1.
.getBoundingClientRect() 總是返回當前節點的 ClientRect 對象, 注意這里是 ClientRect 對象而不是對象數組。
相關APIgetClientRects
getBoundingClientRect
提示以上測試, 可以通過在百度首頁執行進行測試, document.querySelect("#s_kw_wrap") 所獲取到的節點為百度首頁輸入框
以上代碼是在進行jtool類庫編碼時實踐出來的方式,歡迎star
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109709.html
摘要:需求很簡單,而且和知乎的顯示全部收起功能非常相似,但是了一下沒有找到類似的,因此決定自己實現一個看了知乎的網頁代碼。 showImg(https://segmentfault.com/img/remote/1460000008488966);showImg(https://segmentfault.com/img/remote/1460000008488967); Update 20...
摘要:需求很簡單,而且和知乎的顯示全部收起功能非常相似,但是了一下沒有找到類似的,因此決定自己實現一個看了知乎的網頁代碼。 showImg(https://segmentfault.com/img/remote/1460000008488966);showImg(https://segmentfault.com/img/remote/1460000008488967); Update 20...
摘要:獲得當前元素相對于的位置。返回一個對象含有和當給定一個含有和屬性對象時,使用這些值來對集合中每一個元素進行相對于的定位。獲取對象集合中第一個元素相對于其的位置。結尾以上就是中與偏移相關的幾個的解析,歡迎指出其中的問題和有錯誤的地方。 前言 這篇文章主要想說一下Zepto中與偏移相關的一些事,很久很久以前,我們經常會使用offset、position、scrollTop、scrollLe...
閱讀 2800·2021-11-22 14:44
閱讀 541·2021-11-22 12:00
閱讀 3683·2019-08-30 15:54
閱讀 1570·2019-08-29 17:15
閱讀 1898·2019-08-29 13:50
閱讀 1107·2019-08-29 13:17
閱讀 3513·2019-08-29 13:05
閱讀 1181·2019-08-29 11:31