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 相关文章推荐
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
js实现动态显示时间效果
Mar 06 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
通过实例讲解JS如何防抖动
Jun 15 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代码
2013/03/24 PHP
ini_set的用法介绍
2014/01/07 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
js比较日期大小的方法
2015/05/12 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
详解python中@的用法
2019/03/27 Python
Python中Unittest框架的具体使用
2019/08/27 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
介绍一下write命令
2012/09/24 面试题
传播学毕业生求职信
2013/10/11 职场文书
函授毕业生自我鉴定
2013/11/06 职场文书
家长会主持词
2014/03/26 职场文书
小学教师读书活动总结
2014/07/08 职场文书
2014年收银工作总结
2014/11/13 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
初中历史教学反思
2016/02/19 职场文书
windows安装python超详细图文教程
2021/05/21 Python