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 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
JS实现进度条动态加载特效
Mar 25 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 socket方式提交的post详解
2008/07/19 PHP
PHP技术开发技巧分享
2010/03/23 PHP
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
求职信名称怎么写
2014/05/26 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
个人租房协议书样本
2014/10/01 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技