js获取元素的偏移量offset简单方法(必看)

网络编程 2025/1/12 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

前言：以前一直是看别人写的，然后学习点东西，现在也把自己的学习记录下来，给大家一个学习的机会，欢迎大家多多评论和推荐哈，共同进步。竟然还有六个人关注我了，哈哈开心。我会继续写下去的。。

null和undefined都代表没有，但是null是属性存在值不存在，undefined是连这个属性都不存在

//例如
    document.parentNode//浏览器天生自带的一个属性：父亲节点的属性 null (因为一个页面中的document已经是最顶级元素了，它没有父亲)
    document.parentnode//undefined (因为没有parentnode这个属性)

1、parentNode:父亲节点 HTML结构层级关系中的上一级元素

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

    center.parentNode //inner

2、offsetParent：父级参照物在同一个平面中，最外层的元素是里面所有元素的父级参照物（和HTML层级结构没有必然的联系）

一般来说一个页面中所有元素的父级参照物都是body

document.body.offsetParent // null

想要改变父级参照物需要通过position定位来进行改变（absolute relative fixed 都可以进行改变）

<!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 :当前元素（外边框）距离其父级参照物（内边框）的偏移距离

具体如下图所示：

下面是一个offset方法：等同于jQuery中的offset方法，实现获取页面中任意一个元素，距离body的偏移（包含左偏移和上偏移），不管当前元素的父级参照物是谁。获取的一个结果是一个对象{left:距离BODY的左偏移，top:距离BODY的上偏移}

在标准的IE8浏览器中，我们使用offsetLeft/offsetTop其实是把父级参照物的边框已经算在内了。所以我们不需要自己在单独加边框了

代码如下：　　

function offset(curEle){
      var totalLeft = null,totalTop = null,par = curEle.offsetParent;
      //首先加自己本身的左偏移和上偏移
      totalLeft+=curEle.offsetLeft;
      totalTop+=curEle.offsetTop
      //只要没有找到body，我们就把父级参照物的边框和偏移也进行累加
      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简单方法(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

js,获取元素偏移量

标签：

js,获取元素偏移量

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“js获取元素的偏移量offset简单方法(必看)”

暂无js获取元素的偏移量offset简单方法(必看)的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月12日

js获取元素的偏移量offset简单方法(必看)

js,获取元素偏移量

Angular2 自定义validators的实现方法

nodejs模块学习之connect解析

评论“js获取元素的偏移量offset简单方法(必看)”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接