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 ...

随机推荐

网络协议 22 - RPC 协议（下）- 二进制类 RPC 协议
前面我们认识了两个常用文本类的 RPC 协议,对于陌生人之间的沟通,用 NBA.CBA 这样的缩略语,会使得协议约定非常不方便. 在讲 CDN 和 DNS 的时候,我们讲过接入层的设计 ...
go语言调度器源代码情景分析之三：内存
本文是<go调度器源代码情景分析>系列第一章预备知识的第2小节. 内存是计算机系统的存储设备,其主要作用是协助CPU在执行程序时存储数据和指令. 内存由大量内存单元组成,内存单元大小为 ...
Java进阶篇设计模式之九----- 解释器模式和迭代器模式
前言在上一篇中我们学习了行为型模式的责任链模式(Chain of Responsibility Pattern)和命令模式(Command Pattern).本篇则来学习下行为型模式的两个模式, 解 ...
非常贴心的轮子 FreeSql
FreeSql 项目从2018年11月28日开发至今,版本已发布至 v0.3.12,版本规则:年数-月-日-当日版本号.目前主要包括 FreeSql.FreeSql.Repository 两个项目的维 ...
CBC 字节反转攻击
一.CBC 简介现代密码体制现代密码中的加密体制一般分为对称加密体制(Symmetric Key Encryption)和非对称加密体制(Asymmetric Key Encryption).对称 ...
使用Git过程中经常会遇到的问题
目录 git pull如何强制覆盖本地文件 Git如何同时删除本地分支和远程分支 Git如何撤销最近一次提交 Git撤销本地的最后一次提交 Git撤销最近一次远程提交如何修改提交信息和文件修改本地 ...
面向对象之三个基本特征（javaScript）
1. 前言 2. 封装 3. 继承 4. 多态 5. 总结 1. 前言了解过面向对象的同学应该都知道,面向对象三个基本特征是:封装.继承.多态,但是对于这三个词具体可能不太了解. 2. 封装在说封 ...
小米手机Usb之studio安装不了解决办法
近段时间刚学习完安卓基础,在一家小公司入职,昨天晚上翻出了几年前买的小米Note手机,打算用来真机调试Studio,结果运行一直安装不了. 忘记截图了,大概页面差不多这样. 网上看了好多贴子,开发者选 ...
SQL SERVER 查看所有存储过程或视图里包含某个关键字的查询语句
SELECT name, type_desc FROM sys.all_sql_modules s INNER JOIN sys.all_objects o ON s.object_id = o.ob ...
Hexo + GitHub 搭建个人博客
对于程序员来说,搭建和维护一个个人博客十分必要,写博客既是对所学知识的整理和总结,同时也能向他人展现自己的学习成果.这篇教程就是基于 Hexo 和 GitHub 来搭建属于自己的个人博客,简单快捷, ...

offsetLeft 解析

offsetLeft 解析的更多相关文章

随机推荐

热门专题