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 相关文章推荐
奇妙的js
Sep 24 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
获取body标签的两种方法
Oct 13 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
使用Vue实现一个树组件的示例
Nov 06 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的面试题集,附我的答案和分析(一)
2006/11/19 PHP
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
php中yii框架实例用法
2020/12/22 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
js微信支付实现代码
2016/12/22 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
python超简单解决约瑟夫环问题
2015/05/12 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Python3常见函数range()用法详解
2019/12/30 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
如何用python批量调整视频声音
2020/12/22 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
银行出纳岗位职责
2013/11/25 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB