offsetLeft 解析

前言:先看下w3c与之相关的介绍:

element.offsetHeight	返回元素的高度。
element.offsetWidth	返回元素的宽度。
element.offsetLeft	返回元素的水平偏移位置。
element.offsetParent	返回元素的偏移容器。
element.offsetTop	返回元素的垂直偏移位置。

1,简单来说就是偏移量,但它的参考对象到底是谁,我们慢慢来看.

<style>

body { margin:0;  }

.box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; }

.box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; }

.box3 { width:100px; height:100px; margin:100px; background:#999;}

</style>

<body>

<div class="box1"> 
  <div class="box2"> 
    <div class="box3">
    </div> 
  </div> 
</div>

 <script>
      var oBox1 = document.querySelector('.box1'); 
   var oBox2 = document.querySelector('.box2'); 
   var oBox3 = document.querySelector('.box3'); 
   console.log('box1: '+ oBox1.offsetLeft +','+ oBox1.offsetTop); 
   console.log('box2: '+ oBox2.offsetLeft +','+ oBox2.offsetTop);
   console.log('box3: '+ oBox3.offsetLeft +','+ oBox3.offsetTop); 
 </script> 
</body>

效果如下:

这个demo中可以看出在默认情况下每个box的偏移值都是以浏览器为参考对象的.

2.如果我们给父级加上定位呢?(box1添加相对定位)

<body>

<style>

body { margin:0;  }

.box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; position:relative;}  //box1设置相对定位

.box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; }

.box3 { width:100px; height:100px; margin:100px; background:#999;}

</style>

<div class="box1">

    <div class="box2">

        <div class="box3"></div>

    </div>

</div>

<script>

    var oBox1 = document.querySelector('.box1');

    var oBox2 = document.querySelector('.box2');

    var oBox3 = document.querySelector('.box3');

    console.log('box1: '+ oBox1.offsetLeft +','+ oBox1.offsetTop);

    console.log('box2: '+ oBox2.offsetLeft +','+ oBox2.offsetTop);

    console.log('box3: '+ oBox3.offsetLeft +','+ oBox3.offsetTop);

</script>

</body>

效果:

所以给父级添加定位之后,offset的偏移值就会变成相对于父级的偏移值.(除了position:static;外的所有定位,如fixed,relative,absolute都会使偏移值的参考对象变为父级))

3.在我们给父级添加定位之后,还想获取元素相对于浏览器窗口的偏移值怎么办?

　　思路很简单，就是把元素本身的偏移量跟所有上级定位元素的偏移量都加起来就可以了，问题又来了，假如我们不知道他有几个上级定位元素呢？

　　这就需要封装一个函数(用到了offsetParent :获取上一级定位元素对象）:

function offset(obj,direction){        //传入对象 和 方向

    //将top,left首字母大写,并拼接成offsetTop,offsetLeft

    var offsetDir = 'offset'+ direction[0].toUpperCase()+direction.substring(1);

    var realNum = obj[offsetDir];

    var positionParent = obj.offsetParent;  //获取上一级定位元素对象

    while(positionParent != null){

    realNum += positionParent[offsetDir];

    positionParent = positionParent.offsetParent;

    }

    return realNum;

}

实际运用是这样的:

<style>

body { margin:0;  }

.box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; position:relative; }

.box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; position:relative; }

.box3 { width:100px; height:100px; margin:100px; background:#999;}

</style>

<body>

<div class="box1">

    <div class="box2">

        <div class="box3"></div>

    </div>

</div>

<script>

    var oBox1 = document.querySelector('.box1');

    var oBox2 = document.querySelector('.box2');

    var oBox3 = document.querySelector('.box3');

    function offset(obj,direction){

        //将top,left首字母大写,并拼接成offsetTop,offsetLeft

        var offsetDir = 'offset'+ direction[0].toUpperCase()+direction.substring(1);

        var realNum = obj[offsetDir];

        var positionParent = obj.offsetParent;  //获取上一级定位元素对象

        while(positionParent != null){

            realNum += positionParent[offsetDir];

            positionParent = positionParent.offsetParent;

        }

        return realNum;

    }

    console.log('box1: '+ offset(oBox1,'left') +','+ offset(oBox1,'top'));

    console.log('box2: '+ offset(oBox2,'left') +','+ offset(oBox2,'top'));

    console.log('box3: '+ offset(oBox3,'left') +','+ offset(oBox3,'top'));

</script>

</body>

运用到移动端拖拽事件(jquery):

 // 拖拽事件

  var x1;

  var x2;

  var x_c;　　//指针划过的距离

  var xoffsetLeft;

  $('#ulListMoble').on('touchstart', function (e) {

    var touch = e.originalEvent.targetTouches[0];

    x1 = touch.pageX;

  });

  $('#ulListMoble').on('touchmove', function (e) {

    var touch = e.originalEvent.targetTouches[0];

    xoffsetLeft = $('#ulListMoble')[0].offsetLeft;

    x2 = touch.pageX;

    x_c = x1 - x2;

    xoffsetLeft -= x_c;

    // console.log(xoffsetLeft);

    if (xoffsetLeft < 0) {

      $('#ulListMoble').css({ "left": xoffsetLeft + "px" })

    }

    x1 = x2;

  });

})

offsetLeft 解析的更多相关文章

【JavaScript】全面解析offsetLeft、offsetTop
假设 obj 为某个 HTML 控件.obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素. obj.offsetRight 指 obj 距离右方或上层控件的位置,整型, ...
js预解析及特效
预解析: // 作用域: // 域:空间.范围.区域…… // 作用:读.写 script 全局变量.全局函数自上而下函数由里到外 {} 浏览器: “JS解析器” 1)“找一些东西” :var ...
zepto.js 源码解析
http://www.runoob.com/w3cnote/zepto-js-source-analysis.html Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...
前端面试题集锦及答案解析--HTML、 HTTP、web综合问题
前端需要注意哪些SEO 合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有 ...
解析JS运动
解析JS运动物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法: 1.运动的物体使用绝对定位 ...
Android 贝塞尔曲线解析
相信很多同学都知道"贝塞尔曲线"这个词,我们在很多地方都能经常看到.利用"贝塞尔曲线"可以做出很多好看的UI效果,本篇博客就让我们一起学习"贝塞尔曲线 ...
JavaScript (JS)基础：BOM 浅析 (含window对象相关基本方法、属性解析)
① window对象(Math方法也属于window对象): window对象是JavaScript中的顶级对象,所有定义在全局作用域中的变量.函数都会变成window对象的属性和方法,window对 ...
【微信小程序】开发实战之「视图层」WXML & WXSS 全解析
在<微信小程序开发实战之「配置项」与「逻辑层」>中我们详细阐述了小程序开发的程序和页面各配置项与逻辑层的基础知识.下面我们继续解析小程序开发框架中的「视图层」部分.学习完这两篇文章的基 ...
【原】Android热更新开源项目Tinker源码解析系列之三：so热更新
本系列将从以下三个方面对Tinker进行源码解析: Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Android热更新开源项目Tinker源码解析系列之二:资源文件热更新 A ...

随机推荐

Eclipse Debug调试遇到的问题
在使用Debug模式前,一定要先打好断点.快捷调试方法: 在使用过程中,可以只保留Console,Variables,Debug窗口,把其他无用的窗口最小化掉,或者删掉即可.如果要恢复删掉的试图, ...
Hadoop大数据部署
Hadoop大数据部署一. 系统环境配置: 1. 关闭防火墙,selinux 关闭防火墙: systemctl stop firewalld systemctl disable firewalld ...
一段简单的显示当前页面FPS的代码
写前端代码,尤其是做一个前端框架的时候,经常需要及时知道代码的大致性能,这时候如果能有个好的办法能一直看到当前页面的fps就好了. 整体思路是一秒有一千毫秒,先记录当前时间作为最后一次记录fps的时间 ...
锁开销优化以及 CAS 简单说明
锁开销优化以及 CAS 简单说明锁互斥锁是用来保护一个临界区,即保护一个访问共用资源的程序片段,而这些共用资源又无法同时被多个线程访问的特性.当有线程进入临界区段时,其他线程或是进程必须等待. 在 ...
一文快速了解MaxCompute
很多刚初次接触MaxCompute的用户,面对繁多的产品文档内容以及社区文章,往往很难快速.全面了解MaxCompute产品全貌.同时,很多拥有大数据开发经验的开发者,也希望能够结合自身的背景知识,将 ...
Android版数据结构与算法(一):基础简介
版权声明:本文出自汪磊的博客,未经作者允许禁止转载. 一.前言项目进入收尾阶段,忙忙碌碌将近一个多月吧,还好,不算太难,就是麻烦点. 数据结构与算法这个系列早就想写了,一是梳理总结,顺便逼迫自己把一 ...
docker同时删除多个容器
查询所有容器 sudo docker ps -a 同时删除多个符合筛选条件的容器,例如删除状态为“exited”的容器 docker rm $(docker container ls -f " ...
ADO.NET 基础学习笔记1
1. ODBC.OLEDB.ADO.ADO.NET之间的关系 ODBC: 开放数据库互连(ODBC)是MICROSOFT提出的数据库访问接口标准.ODBC(Open DatabaseConnectiv ...
[ gczdac ] 20190306 访者必阅
1.我的私人博客!!! 2.博主还处于入门学习阶段,并且非常玻璃心 3. 激烈讨论√ 人身攻击× 4. 欢迎指正错误,相互学习 5. 很少在线,无法及时回复请谅解 https://www.cnblo ...
win10启动远程桌面连接的设置
现在win10系统用的非常普遍,做项目的时候,也经常将一台win10系统的机器当作服务器使用.这就涉及到利用远程桌面登录到win10系统的问题,有几次利用远程桌面登录win10系统的设置经历,好像每次 ...

offsetLeft 解析

offsetLeft 解析的更多相关文章

随机推荐

热门专题