资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

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

凤阳网站制作公司哪家好,找成都创新互联公司!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。成都创新互联公司2013年至今到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司

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 都可以进行改变  )




  
  Document
  


  

3、offsetTop/offsetLeft :当前元素(外边框)距离其父级参照物(内边框)的偏移距离

具体如下图所示:

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

下面是一个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获取元素的偏移量offset简单方法(必看)
本文URL:http://www.cdkjz.cn/article/jhehci.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220