溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

js獲取元素的偏移量offset簡單方法(必看)

發(fā)布時間：2020-09-18 19:12:58 來源：腳本之家 閱讀：317 作者：jingxian 欄目：web開發(fā)

前言：以前一直是看別人寫的，然后學(xué)習(xí)點東西，現(xiàn)在也把自己的學(xué)習(xí)記錄下來，給大家一個學(xué)習(xí)的機(jī)會，歡迎大家多多評論和推薦哈，共同進(jìn)步。竟然還有六個人關(guān)注我了 ，哈哈 開心。我會繼續(xù)寫下去的。。

null和undefined都代表沒有，但是null是屬性存在值不存在，undefined是連這個屬性都不存在

//例如
    document.parentNode//瀏覽器天生自帶的一個屬性：父親節(jié)點的屬性 null (因為一個頁面中的document已經(jīng)是最頂級元素了，它沒有父親)
    document.parentnode//undefined (因為沒有parentnode這個屬性)

1、parentNode:父親節(jié)點  HTML結(jié)構(gòu)層級關(guān)系中的上一級元素

var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    var center = document.getElementById('center');

    center.parentNode //inner

2、offsetParent：父級參照物 在同一個平面中，最外層的元素是里面所有元素的父級參照物（和HTML層級結(jié)構(gòu)沒有必然的聯(lián)系）

一般來說一個頁面中所有元素的父級參照物都是body

document.body.offsetParent // null

想要改變父級參照物需要通過position定位來進(jìn)行改變（absolute relative fixed 都可以進(jìn)行改變  ）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    #outer{
      width:180px;
      height:180px;
      margin:50px auto;
      border:10px solid #000;
      background:orange;
      padding:50px;
    }
    #inner{
      width:80px;
      height:80px;
      padding:50px;
      border:10px solid #000;
      background:green;
    }
    #center{
      width:50px;
      height:50px;
      border:10px solid #000;
      background:red;
    }
  </style>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <div id="center"></div>
    </div>
  </div>

  <script>
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    var center = document.getElementById('center');

    outer.style.position = "relative";//這樣inner和center的參照物都是outer
    center.offsetParent//outer
    inner.offsetParent//outer
    outer.offsetParent//body
    outer.style.position = "relative";//
    inner.style.position = "relative";
    center.offsetParent//inner
    inner.offsetParent//outer
    outer.offsetParent//body
  </script>
</body>
</html>

3、offsetTop/offsetLeft :當(dāng)前元素（外邊框）距離其父級參照物（內(nèi)邊框）的偏移距離

具體如下圖所示：

js獲取元素的偏移量offset簡單方法(必看)

下面是一個offset方法：等同于jQuery中的offset方法，實現(xiàn)獲取頁面中任意一個元素，距離body的偏移（包含左偏移和上偏移），不管當(dāng)前元素的父級參照物是誰。獲取的一個結(jié)果是一個對象{left:距離BODY的左偏移，top:距離BODY的上偏移}

在標(biāo)準(zhǔn)的IE8瀏覽器中，我們使用offsetLeft/offsetTop其實是把父級參照物的邊框已經(jīng)算在內(nèi)了。所以我們不需要自己在單獨加邊框了

代碼如下：　　

function offset(curEle){
      var totalLeft = null,totalTop = null,par = curEle.offsetParent;
      //首先加自己本身的左偏移和上偏移
      totalLeft+=curEle.offsetLeft;
      totalTop+=curEle.offsetTop
      //只要沒有找到body，我們就把父級參照物的邊框和偏移也進(jìn)行累加
      while(par){
        if(navigator.userAgent.indexOf("MSIE 8.0")===-1){
          //累加父級參照物的邊框
          totalLeft+=par.clientLeft;
          totalTop+=par.clientTop
        }
        
        //累加父級參照物本身的偏移
        totalLeft+=par.offsetLeft;
        totalTop+=par.offsetTop
        par = par.offsetParent;
      }

      return{
        left:totalLeft,
        top:totalTop
      }
    }
    console.log(offset(center).left)

以上這篇js獲取元素的偏移量offset簡單方法(必看)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手