原生js怎么實現(xiàn)offset方法

這篇文章主要介紹原生js怎么實現(xiàn)offset方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)是專業(yè)的鄂倫春網(wǎng)站建設(shè)公司，鄂倫春接單;提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行鄂倫春網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

js的作用是什么

1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進行服務(wù)器端編程。

在為 jTool 提供 offset (獲取當前節(jié)點位置）方法時，先后使用了兩種方式進行實現(xiàn)，現(xiàn)整理出來以作記錄。

前后共使用了兩種方式實現(xiàn)了該方法，這里將這兩種方法分別列出。

通過遞歸實現(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é)點
    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}

通過ClientRect實現(xiàn)

function offset2(node) {
  var offest = {
    top: 0,
    left: 0
  };
  // 當前為IE11以下, 直接返回{top: 0, left: 0}
  if (!node.getClientRects().length) {
    return offest;
  }
  // 當前DOM節(jié)點的 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
  };
}

// 執(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 以下瀏覽器并不支持; 所以該種實現(xiàn)，只適于現(xiàn)代瀏覽器。

.getClientRects()

返回值是 ClientRect 對象集合(與該元素相關(guān)的CSS邊框)，每個 ClientRect 對象包含一組描述該邊框的只讀屬性——left、top、right 和 bottom，單位為像素，這些屬性值是相對于視口的top-left的。

并包含 length 屬性， IE11以下可以通過是否包含 length 來驗證當前是否為IE11以上版現(xiàn)。

.getBoundingClientRect()

返回值包含了一組用于描述邊框的只讀屬性——left、top、right 和 bottom，單位為像素。除了 width 和 height 外的屬性都是相對于視口的左上角位置而言的。

.getBoundingClientRect() 與 .getClientRects()的關(guān)系

這兩個方法的區(qū)別與當前的 display 相關(guān)，當 display=inline 時， .getClientRects() 返回當前節(jié)點內(nèi)每一行文本的 ClientRect 對象數(shù)組，此時數(shù)組長度等于文本行數(shù)。
當 display != inline 時， .getClientRects() 返回當前節(jié)點的 ClientRect 對象數(shù)組，此時數(shù)組長度為1.
.getBoundingClientRect() 總是返回當前節(jié)點的 ClientRect 對象，注意這里是 ClientRect 對象而不是對象數(shù)組。

以上是“原生js怎么實現(xiàn)offset方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：原生js怎么實現(xiàn)offset方法
標題來源：http://bm7419.com/article32/psdepc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、用戶體驗、網(wǎng)站建設(shè)、Google、網(wǎng)站設(shè)計公司、手機網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容