offset

　　　　　　offset 译为“偏移量”，是javascript很重要的一个概念。涉及到便宜量的主要有offsetLeft、offsetTop、offHeight、offsetWidth这四个属性还有一个偏移参照--定位父级offsetParent

　　　　　　参照图：

　　　　在理解偏移量之前，首先要理解offsetParent。从字面上来理解。应该是翻译为“偏移父级”，但并非如此，它被译为“定位父级”

　　　　　　以下是对offsetParent的定义：

　　　　　　　　与当前元素最近的经过定位（不是static）的父级元素。主要分为下列几种情况：

　　　　　　　　　　1.元素自身有fixed定位，offsetParent的结果为null

　　　　　　　　　　当元素自身有fixed固定定位时，我们知道固定定位的元素相对于窗口进行定位，此时没有定位父级，故offsetParent为null

　　　　　　　　　　注意firefox浏览器有兼容问题

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="test" style="position: fixed"></div>

    <script>

        var test=document.getElementById('test');

        console.log(test.offsetParent);

    </script>

</body>

</html>

　　　　　在chrome中的执行结果：　　　　　

　　　　在firefox的执行结果：

　　　　　　　　　　2.当元素自身无fixed定位时，且父级元素都未经过定位，offParent的结果为<body>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="test"></div>

    <script>

        var test=document.getElementById('test');

        console.log(test.offsetParent);

    </script>

</body>

</html>

　　　　　　效果如下：

　　　　　　　　3.元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="box1" style="position: absolute;">

        <div id="box2" style="position: absolute;">

            <div id="test"></div>

        </div>

    </div>

    <script>

        var test=document.getElementById('test');

        console.log(test.offsetParent);

    </script>

</body>

</html>

　　　　　　效果如下：

　　　偏移量

　　　　　　偏移量共包括offsetTop、offsetLeft、offsetWidth、offsetHeight这四个属性

　　　　offsetWidth

　　　　　　　　offsetWidth表示元素在水平方向上占用的空间大小（包括边框和padding） 无单位（以px计）

　　　　　　　　　　offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width;

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #test{

            border: 2px solid #000;

            width: 200px;

            height: 200px;

            padding: 10px;

            margin: 10px;

        }

    </style>

</head>

<body>

    <div id="box1" style="position: absolute;">

        <div id="box2" style="position: absolute;">

            <div id="test"></div>

        </div>

    </div>

    <script>

        var test=document.getElementById('test');

        console.log(test.offsetWidth);

    </script>

</body>

</html>

　　输出为：

　　　　offsetHeight

　　　　　　offsetHeight表示元素在垂直方向上占用的空间大小（包括边框和padding），无单位(以px计)

　　　　　　　offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width

　　　　[注意]如果存在垂直滚动条，offsetWidth也包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight也包括水平滚动条的高度

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="test" style="width:100px; height:100px; padding:10px; margin:10px; border:1px solid black; overflow: scroll;"></div>

<script>

//IE8-浏览器将垂直滚动条的宽度计算在width宽度和height高度中，width和height的值仍然是100px；

//而其他浏览器则把垂直滚动条的宽度从width宽度中移出，把水平滚动条的高度从height高度中移出，则滚动条宽度为17px，width宽度和height高度为剩下的83px

if(window.getComputedStyle){

    console.log(getComputedStyle(test).width,getComputedStyle(test).height)//83px

}else{

    console.log(test.currentStyle.width,test.currentStyle.height);//100px

}

//122=1+10+100+10+1

console.log(test.offsetWidth,test.offsetHeight);

</script>

</body>

</html>

　　

　　　　chrome显示如下：

　　　　offsetTop

　　　　　　offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离

　　　　offsetLeft

　　　　　　offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离

　　　　注意事项：

　　　　　　　　【1】所有偏移量属性都是只读的

　　　　　　　　【2】如果给元素设置了display:none，则它的偏移量属性都为0

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="test" style="width:100px; height:100px; padding:10px; margin:10px; display: none;"></div>

<script>

console.log(test.offsetWidth,test.offsetTop);

</script>

</body>

</html>

　　　　chrome显示如下：

　　　　　　　　【3】每次访问偏移量属性都需要重新计算

　　　　　　　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="test" style="width:100px; height:100px; padding:10px; margin:10px; display: none;"></div>

<script>

    console.time("time");

    for(var i = 0; i < 100000; i++){

        var a = test.offsetWidth;

    }

    console.timeEnd('time');//106.701ms

</script>

</body>

</html>

　　　　chrome显示如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="test" style="width:100px; height:100px; padding:10px; margin:10px; display: none;"></div>

<script>

    console.time("time");

    var a = test.offsetWidth;

    for(var i = 0; i < 100000; i++){

        var b = a;

    }

    console.timeEnd('time');//6.274ms

</script>

</body>

</html>

　　chrome显示如下：

　　由上面代码对比可知，重复访问偏移量属性需要耗费大量的性能，所以要尽量避免重复访问这些属性。如果需要重复访问，则把它们的值保存在变量中，以提高性能

　　　　　　　　OK   offset讲解暂告一段落！

　　　　

详解offset的更多相关文章

  1. 图文详解Unity3D中Material的Tiling和Offset是怎么回事

    图文详解Unity3D中Material的Tiling和Offset是怎么回事 Tiling和Offset概述 Tiling表示UV坐标的缩放倍数,Offset表示UV坐标的起始位置. 这样说当然是隔 ...

  2. JQ的offset().top与js的offsetTop区别详解

    一.前言 最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因 ...

  3. JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离

     壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...

  4. js的client、scroll、offset详解与兼容性

    clientWidth:可视区宽说明:样式宽+padding参考:js的client详解 scrollTop : 滚动条滚动距离说明:chrome下他会以为滚动条是文档元素的,所以需要做兼容:var ...

  5. C#进阶系列——WebApi 接口返回值不困惑：返回值类型详解

    前言:已经有一个月没写点什么了,感觉心里空落落的.今天再来篇干货,想要学习Webapi的园友们速速动起来,跟着博主一起来学习吧.之前分享过一篇 C#进阶系列——WebApi接口传参不再困惑:传参详解  ...

  6. Android图片缓存之Bitmap详解

    前言: 最近准备研究一下图片缓存框架,基于这个想法觉得还是先了解有关图片缓存的基础知识,今天重点学习一下Bitmap.BitmapFactory这两个类. 图片缓存相关博客地址: Android图片缓 ...

  7. redis配置详解

    ##redis配置详解 # Redis configuration file example. # # Note that in order to read the configuration fil ...

  8. Linux C 字符串函数 sprintf()、snprintf() 详解

    一.sprintf() 函数详解 在将各种类 型的数据构造成字符串时,sprintf 的强大功能很少会让你失望. 由于 sprintf 跟 printf 在用法上几乎一样,只是打印的目的地不同而已,前 ...

  9. python之OS模块详解

    python之OS模块详解 ^_^,步入第二个模块世界----->OS 常见函数列表 os.sep:取代操作系统特定的路径分隔符 os.name:指示你正在使用的工作平台.比如对于Windows ...

随机推荐

  1. 06 swap命令，进程管理，rmp命令与yum命令，源码安装python

    作业一: 1)开启Linux系统前添加一块大小为15G的SCSI硬盘 2)开启系统,右击桌面,打开终端 3)为新加的硬盘分区,一个主分区大小为5G,剩余空间给扩展分区,在扩展分区上划分1个逻辑分区,大 ...

  2. 转：centos彻底删除文件夹、文件命令

    转自:http://www.cnblogs.com/kluan/p/4458296.html centos彻底删除文件夹.文件命令(centos 新建.删除.移动.复制等命令: 1.新建文件夹 mkd ...

  3. linux在文件中包含某个关键词的指定行插入内容

    1. 在包含某个关键字的行上面插入一行文字 sed -i '/wangzai/i\doubi' 1.txt 把内容doubi插入到包含wangzai关键字的上一行 2. 在包含某个关键字的行下面插入一 ...

  4. Ubuntu16.04安装印象笔记

    Nixnote 是一个 Evernote 开源客户端,原名 Nevernote.Evernote 是一个著名的笔记等个人资料整理和同步软件, 因为 Evernote 没有 Linux 下的官方版本,因 ...

  5. selenium+xpath 文本信息定位

    selenium中根据父子.兄弟.相邻节点定位的方法,很多人在实际应用中会遇到想定位的节点无法直接定位,需要通过附近节点来相对定位的问题,但从父节点定位子节点容易,从子节点定位父节点.定位一个节点的哥 ...

  6. 条件编译#ifdef的妙用详解

    c语言中条件编译相关的预编译指令,包括  #define.#undef.#ifdef.#ifndef.#if.#elif.#else.#endif.defined. #define           ...

  7. PreparedStatement和Statement区别详解

    技术原理 该 PreparedStatement接口继承Statement,并与之在两方面有所不同: PreparedStatement 实例包含已编译的 SQL 语句.这就是使语句“准备好”.包含于 ...

  8. 前端学习之JavaScript中的 NaN 与 isNaN

    NaN NaN 即 Not a Number ,不是一个数字. 在 JavaScript 中,整数和浮点数都统称为 Number 类型 .除此之外,Number 类型还有一个很特殊的值,即 NaN . ...

  9. CSS 图片

    CSS 图片 一.圆角图片 img { border-radius: 8px; } 二.缩略图 border 属性来创建缩略图. img { border: 1px solid #ddd; borde ...

  10. 20145331 《Java程序设计》第10周学习总结

    20145331 <Java程序设计>第10周学习总结 教材学习内容总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置 ...