前言:先看下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 解析的更多相关文章

  1. 【JavaScript】全面解析offsetLeft、offsetTop

    假设 obj 为某个 HTML 控件.obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素. obj.offsetRight 指 obj 距离右方或上层控件的位置,整型, ...

  2. js预解析及特效

    预解析: // 作用域: // 域:空间.范围.区域…… // 作用:读.写 script 全局变量.全局函数 自上而下 函数 由里到外 {} 浏览器: “JS解析器” 1)“找一些东西” :var ...

  3. zepto.js 源码解析

    http://www.runoob.com/w3cnote/zepto-js-source-analysis.html Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...

  4. 前端面试题集锦及答案解析--HTML、 HTTP、web综合问题

    前端需要注意哪些SEO 合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有 ...

  5. 解析JS运动

    解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法:      1.运动的物体使用绝对定位 ...

  6. Android 贝塞尔曲线解析

    相信很多同学都知道"贝塞尔曲线"这个词,我们在很多地方都能经常看到.利用"贝塞尔曲线"可以做出很多好看的UI效果,本篇博客就让我们一起学习"贝塞尔曲线 ...

  7. JavaScript (JS)基础：BOM 浅析 (含window对象相关基本方法、属性解析)

    ① window对象(Math方法也属于window对象): window对象是JavaScript中的顶级对象,所有定义在全局作用域中的变量.函数都会变成window对象的属性和方法,window对 ...

  8. 【微信小程序】开发实战 之 「视图层」WXML & WXSS 全解析

    在<微信小程序开发实战 之 「配置项」与「逻辑层」>中我们详细阐述了小程序开发的程序和页面各配置项与逻辑层的基础知识.下面我们继续解析小程序开发框架中的「视图层」部分.学习完这两篇文章的基 ...

  9. 【原】Android热更新开源项目Tinker源码解析系列之三：so热更新

    本系列将从以下三个方面对Tinker进行源码解析: Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Android热更新开源项目Tinker源码解析系列之二:资源文件热更新 A ...

随机推荐

  1. 神奇的Scala Macro之旅（一）- 什么时候用宏

    在Lisp语言中,macro是一个神器,可以“动态的生成代码”,然后被执行,这种方式给到Lisp无限的表达能力.除Lisp之外,很少有语言支持Macro这个特性,我记得 GWT之中曾经有一个类似的Ge ...

  2. 学习攻略丨如何进阶为一名Web安全高手？

    学习Web安全的小伙伴很多,但是能成为Web安全高手却很少,很多人都是从入门到放弃,是真的太难还是学习方法不对? 对于基础薄弱的人来说,一般都是从XSS.SQL注入等简单的漏洞研究入门的.除了了解各种 ...

  3. quillJS 富文本编辑器源码分析系列1

    quillJS 富文本编辑器目前是一款很火富文本编辑器,使用广泛,github 上面的 star 有 22,492,虽然说不以 star 论英雄,不过这可以说明它还是比较受欢迎的: 它的特点是:轻量, ...

  4. 扒一扒.NET Core的环境配置提供程序

    很久之前,在玩Docker的时候顺便扒了扒,最近,终于下定决心花了些时间整理并成文,希望能够给大家一些帮助. 目录 .NET Core中的配置 ASP.NET Core中的配置 扒一扒环境变量提供程序 ...

  5. vue + element + 初始化项目

    前提:已经安装了好了npm 和 vue脚手架 注意: 进入想要放置项目的目录下. 1.vue init webpack sun-vue-element 2.根据提示输入 y/n 3.npm run d ...

  6. Proj.Net 投影介绍

    Proj.Net是开源地图投影库Proj.4的.net版本,许多GIS开源软件的投影都直接或间接地使用Proj.4的库,Proj.4是用C语言编写..Net下的开源GIS项目NetTopologySu ...

  7. 配置Asp.Net Web项目NLog配置文件的位置

    在使用NLog在asp.net项目中发现,如果想单独配其配置文件的位置时没有像Log4Net的特性配置方案,可以使其提供的 XmlLoggingConfiguration类来初始化: 见:https: ...

  8. 在docker私有仓库如何查看有哪些镜像？

    搭建了docker私有仓库,上传了一些镜像,时间长了就会忘了有哪些镜像,在网上查了,有大佬是通过脚本查看的,多厉害! #!/usr/bin/env python#-*- coding:utf-8 -* ...

  9. rabbitmq消费者“无故消失”

    hi,all   导读:9月1号17:12左右,发现影子队列存在大量“unacked”(收到了消息,但是还没有手动确认消息)的消息,一段时间后“unacked”的数量没有减少,但是观察消费者端的日志, ...

  10. JS-JSON知识点总结

    一.JSON的2个重要方法:JSON.stringify(),JSON.parse() //json转字符串:JSON.stringify() let myJson = { name: 'lizhao ...