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


Posted in Javascript onJuly 05, 2017

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

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

具体如下图所示:

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简单方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
使用angular帮你实现拖拽的示例
Jul 05 #Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 #Javascript
jquery拖动改变div大小
Jul 04 #jQuery
JavaScript无操作后屏保功能的实现方法
Jul 04 #Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 #Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 #Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 #Javascript
You might like
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
python基础教程项目三之万能的XML
2018/04/02 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
python制作简单五子棋游戏
2019/06/18 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
视图的作用
2014/12/19 面试题
大学生表扬信范文
2014/01/09 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
教育合作协议范本
2014/10/17 职场文书
2014年实验室工作总结
2014/12/03 职场文书
开幕式邀请函
2015/01/31 职场文书
首次购房证明
2015/06/19 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
Python Django ORM连表正反操作技巧
2021/06/13 Python
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript