前言:先看下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. JavaScript使用闭包实现单例模式

    闭包是JS的一种特性,其中一点就是:可以将外部函数的变量保存在内存中,利用这一特性,我们可以用来实现类的单例模式. 首先需要了解何为单例模式: 意图:保证一个类仅有一个实例,并提供一个访问它的全局访问 ...

  2. 【STM32H7教程】第5章 STM32H7下载和调试方法（MDK5）

    完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第5章   STM32H7下载和调试方法(MDK5) 本 ...

  3. Oracle执行计划学习笔记

    目录 一.获取执行计划的方法 (1) explain plan for (2) set autotrace on (3) statistics_level=all (4) dbms_xplan.dis ...

  4. Protobuf 语言指南(proto3)

    Protobuf 语言指南(proto3) Protocol Buffer是Google的语言中立的,平台中立的,可扩展机制的,用于序列化结构化数据 - 对比XML,但更小,更快,更简单.您可以定义数 ...

  5. 面试挂在了 LRU 缓存算法设计上

    好吧,有人可能觉得我标题党了,但我想告诉你们的是,前阵子面试确实挂在了 RLU 缓存算法的设计上了.当时做题的时候,自己想的太多了,感觉设计一个 LRU(Least recently used) 缓存 ...

  6. 使用Keepalived构建LVS高可用集群

    LVS的DR模型配置+Keepalive部署 介绍 下图为DR模型的通信过程,图中的IP不要被扑结构中的IP迷惑,图里只是为了说明DR的通信原理,应用到本例中的拓扑上其工作原理不变. 拓扑结构 服务器 ...

  7. Cenots7下安装运行.NET Core、MicroSoft SQL Server 2019 preview 的基础实践

    一:概要 适应人群:.Net初学者.想了解.Net Core在Linux系统中的运行环境搭建者.初次且想在linux上应用.Net Core开发应用程序者: 基础技能:了解.NET基础开发技能者.有一 ...

  8. Java并发——CAS

    什么是CAS? CAS是Compare And Swap的简称.在Java中有很多实现,比如compareAndSwapObject()方法,或者compareAndSwapInt()方法等.多用在包 ...

  9. SharePoint布局页创建（实战）

    分享人:广州华软 极简 一. 前言 SharePoint有母版页及布局页,母版页控制页面头部.底部,而布局页则控制页面中间内容区域.通过布局页,可以快速修改页面内容区域. SharePoint的页面布 ...

  10. Ubuntu 18.04.1 LTS + kolla-ansible 部署 openstack Rocky all-in-one 环境

    1. kolla 项目介绍 简介 kolla 的使命是为 openstack 云平台提供生产级别的.开箱即用的自动化部署能力. kolla 要实现 openetack 部署分为两步,第一步是制作 do ...