很多初学者对于JavaScript中的offset、scroll、client一直弄不明白，虽然网上到处都可以看一张图（图1），但这张图太多太杂，并且由于浏览器差异性，图示也不完全正确。

图一

　　不知道大家看到这张图的第一感觉如何，反正我的感觉就是“这次第，怎一个乱字了得”。

　　既然我认为上图太多太乱，那么我就把offset、scroll、client分开说，希望能让大家彻底弄清楚，今天只说offset。

一、关于offset，我们要弄明白什么

　　w3中offset相关页面是：http://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface

　　在这里我们可以看到，关于offset共有5个东西需要弄清楚：

　　1、offsetParent

　　2、offsetTop

　　3、offsetLeft

　　4、offsetWidth

　　5、offsetHeight

　　我们根据难易程度把以上5点分为三类来讲解。

　　在分析之前，先来看段测试代码：

<body>

    <style type="text/css">

        body {

            border:20px solid #CCC;

            margin:10px;

            padding:40px;

            background:#EEE;

        }

        #test {

            width:400px;

            height:200px;

            padding:20px;

            background:#F60;

            border:5px solid #888;

        }

    </style>

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

    <script>

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

        test.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" +

            "<p>offsetWidth:" + test.offsetWidth + "</p>" +

            "<p>offsetHeight:"+test.offsetHeight+"</p>"+

            "<p>offsetLeft:"+test.offsetLeft+"</p>"+

            "<p>offsetTop:"+test.offsetTop+"</p>";

    </script>

</body>

　　这段代码在各个浏览器中的效果如图：

图二（IE6/7）

图三（IE8/9/10）

图四（Firefox）

图五（Chrome）

二、offsetWidth与offsetHeight

　　大家可以看到，上面图二~图五中的共同点是 offsetWidth与offsetHeight是一致的，因此这里放到地起讲。

　　MDN中对offsetWidth的概述和描述是：

Returns the layout width of an element.

Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.

　　也就是元素的可视宽度，这个宽度包括元素的边框(border)，水平padding，垂直滚动条宽度，元素本身宽度等。

　　offsetHeight跟offsetWidth类似，只是方向改为垂直方向上的。

　　只是我们的示例中没有水平和垂直滚动条。另外经过测试可以发现，即使元素加上水平或垂直滚动条，offsetWidth跟offsetHeight的值是不会更改的，因为浏览器渲染时把滚动条的宽度（或高度）算在了元素本身的宽度（或高度）中了。

　　通过代码及图中数值，我们不难看出:

　　offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

　　offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)

　　对这两个概念就总结到这里，大家现在弄明白了吗？

三、offsetLeft与offsetTop

　　offsetWidth与offsetHeight有个特点，就是这两个属性的值只与该元素有关，与周围元素（父级和子级元素无关）。

　　然而，offsetLeft与offsetTop却不是这样，这两个属性与offsetParent有关，但在我们讲到offsetParent之前，我们先不管offsetParent是什么及怎么判断，我们只要知道offsetLeft和offsetTop与offsetParent有关就行了，上面的示例中offsetParent就是body。

　　MSDN上对offsetLeft的定义是：

Retrieves the calculated left position of the object relative to the layout or coordinate parent, as specified by the offsetParent property

　　也就是返回对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量。从这个定义中我们可以明确地知道offsetLeft与当前元素的margin-left和offsetParent的padding-left有关。也就是说应该是：

　　offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。

　　offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)。

　　但通过上面的例子我们可以看到，当offsetParent为body时，对于offsetLeft与offsetTop的值有三种，分别是：IE6/7中的40，IE8/9/10 和 Chrome中的70，以及FireFox中的50。

　　通过这些数值我们可以知道，当offsetParent为body时情况比较特殊:

　　在IE8/9/10及Chrome中，offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(当前元素的margin-left)。

　　在FireFox中，offsetLeft = (body的margin-left)+(body的padding-left)+(当前元素的margin-left)。

四、offsetParent

　　终于到offsetParent了。

　　offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。

　　总的来说两条规则：

　　1、如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

　　2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

　　上面的示例就是第1条说的情况，我们来验证一下：

　　我们把JS改为(添加了一行代码：红色部分)：

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

test.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" +

    "<p>offsetParent:" + test.offsetParent.tagName + "</p>" +

    "<p>offsetWidth:" + test.offsetWidth + "</p>" +

    "<p>offsetHeight:"+test.offsetHeight+"</p>"+

    "<p>offsetLeft:"+test.offsetLeft+"</p>"+

    "<p>offsetTop:"+test.offsetTop+"</p>";

　　FireFox下的效果为：

图六

　　在其他浏览器中效果相同，都是body。

　　我们再来验证一下第2条，测试HTML如下：

<!DOCTYPE html>

<html>

<head>

    <title>Demo</title>

</head>

<body>

    <style type="text/css">

        body {

            margin:0;

            padding:0;

            background:#EEE;

        }

        div,ul,li {

            margin:0;

        }

        li {

            height:20px;

            line-height:20px;

        }

        #test {

            width:400px;

            height:250px;

            padding:20px;

            background:#F60;

            border:10px solid #888;

        }

        #divtest {

            margin:30px;

            position:relative;

            left:50px;

            top:70px;

            padding:20px;

        }

    </style>

    <div id="divtest">

        <ul>

            <li>Test</li>

            <li>Test</li>

        </ul>

        <div id="test">

        </div>

    </div>

    <script>

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

test.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" +

    "<p>offsetParent:" + test.offsetParent.tagName + "</p>" +

    "<p>offsetWidth:" + test.offsetWidth + "</p>" +

    "<p>offsetHeight:"+test.offsetHeight+"</p>"+

    "<p>offsetLeft:"+test.offsetLeft+"</p>"+

    "<p>offsetTop:"+test.offsetTop+"</p>";

    </script>

</body>

</html>

　　在FireFox中效果为：

图七

　　在其他浏览器中offsetParent也是一致的。

　　在这里我们也可以看到，第三点中给出的offsetLeft的计算公式是适用的。

小结

　　以上的总结希望能对大家有所帮助，在看完本文内容后再回过头来看文章开头部分的那张图(只看offset)部分，是不是清楚了很多？

　　最后，对于offsetParent为body的情况，现在的主流浏览器IE8/9/10和Chrome及Firefox都跟定义

offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。

　　offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)。

　　的不一样，对于这一点我也没有弄明白，如果有朋友知道请不吝赐教。

学习笔记（一）：offset的更多相关文章

MySQL 学习笔记 (limit offset)
select * from table limit (10000,10);这样是很慢的,因为要定位比较快的写法是 select * from table where id >=(select ...
redis 学习笔记(6)-cluster集群搭建
上次写redis的学习笔记还是2014年,一转眼已经快2年过去了,在段时间里,redis最大的变化之一就是cluster功能的正式发布,以前要搞redis集群,得借助一致性hash来自己搞shardi ...
linux驱动开发之块设备学习笔记
我的博客主要用来存放我的学习笔记,如有侵权,请与我练习,我会立刻删除.学习参考:http://www.cnblogs.com/yuanfang/archive/2010/12/24/1916231.h ...
jQuery 学习笔记
jQuery 学习笔记一.jQuery概述宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
两千行PHP学习笔记
亲们,如约而至的PHP笔记来啦~绝对干货! 以下为我以前学PHP时做的笔记,时不时的也会添加一些基础知识点进去,有时还翻出来查查. MySQL笔记:一千行MySQL学习笔记http://www.cnb ...
spark学习笔记总结-spark入门资料精化
Spark学习笔记 Spark简介 spark 可以很容易和yarn结合,直接调用HDFS.Hbase上面的数据,和hadoop结合.配置很容易. spark发展迅猛,框架比hadoop更加灵活实用. ...
jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
cocos2dx游戏开发——别踩白块学习笔记（二）——经典模式的实现
一.创建GameScene以及GameLayer 就是简单创建一个Scene而已,在此就不多说啦~,可以参照我的打飞机的学习笔记(2). 二.添加一个开始栏很简单,就是调用Block中的create ...
zepto源码--核心方法10（位置）--学习笔记
今天基本上就是zepto学习笔记的最后一篇了,介绍一下有关位置的函数,position, offset, scrollLeft, scrollTop scrollLeft 如果所选取的包装集不存在,则 ...
学习笔记：The Log（我所读过的最好的一篇分布式技术文章）
前言这是一篇学习笔记. 学习的材料来自Jay Kreps的一篇讲Log的博文. 原文很长,但是我坚持看完了,收获颇多,也深深为Jay哥的技术能力.架构能力和对于分布式系统的理解之深刻所折服.同时也因 ...

随机推荐

Docker -- 2 -- 利用docker部署网站和数据库
在Docker – 系统整洁之道 – 1中已经对Docker的一些命令和Docker镜像的使用及操作做了记录. 这次就利用docker进行一次真正的实例使用,使用docker搭建一个简单的答题系统,这 ...
Vim使用心得总结
基本快捷键 v 进入可视模式 i / a 光标前/后插入模式 I / A 行首/末插入模式 Crtl+c 进入命令模式 Crtl+v 进入块可视模式 Q 进入EX模式 gh 进入选择模式 u 撤销 U ...
Beautiful Soup的使用
Beautiful Soup简单实用,功能也算比较全,之前下载都是自己使用xpath去获取信息,以后简单的解析可以用这个,方便省事. Beautiful Soup 是用 Python 写的一个 HTM ...
紫书例题 9-14 UVa 1218 （树形dp）
这道题有个初始值设成1e9, 然后这个值是要加很多次的,然后就会溢出变成负数, 然后就一直WA, 找这个bug找了一个小时--以后不能随便这样设那么大, 要考虑会不会加很多次然后溢出. 讲一下思路. ...
怎样用redis实现分布式锁
引子 redis作为一个强大的key/value数据库.事实上还能够用来实现轻量级的分布式锁. 1.实现方案1 最早官方在SETNX命令页给了一个实现: acquire lock: SETNX loc ...
LinkedIn Cubert 实践指南
· LinkedIn Cubert安装指南 · Understanding Cubert Concepts(一)Partitioned Blocks · Understanding Cubert Co ...
高效的TCP数据拆包器
高效的TCP数据拆包器接收器,每秒拆1KB的包达到30万以上 /// 数据同步协义数据接收器 /// </summary> /// <remarks> /// 主要功能有 / ...
win7中下mysql-5.6.22免安装配置
windows下mysql免安装配置 1. 下载mysql免安装压缩包下载mysql-5.6.22-winx64.zip 解压到本地D:\mysql-5.6.22-winx64 2. 修改配置文件 ...
android 图片特效处理之图片叠加
这篇将讲到图片特效处理的图片叠加效果.跟前面一样是对像素点进行处理,可参照前面的android图像处理系列之七--图片涂鸦,水印-图片叠加和android图像处理系列之六--给图片添加边框(下)-图片 ...
原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数
1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

学习笔记（一）：offset