让你彻底弄清offset
很多初学者对于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
offsetWidthis 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的更多相关文章
- JavaScript：让你彻底弄清offset
ylbtech-JavaScript:让你彻底弄清offset 1.返回顶部 1. 很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张 ...
- 前端攻城狮学习笔记九：让你彻底弄清offset
很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...
- 差别client、offset、scroll系列以及event的几个距离属性
element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个仅仅读属性,它包含了: css width + ...
- 区别client、offset、scroll系列以及event的几个距离属性
element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个只读属性,它包括了: css width + p ...
- 这些年，我收集的JavaScript代码
这些年,我收集的JavaScript代码(一) http://www.cnblogs.com/jscode/archive/2012/07/25/2605395.html 这些年,我收集的JavaSc ...
- JQ的offset().top与js的offsetTop区别详解
一.前言 最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因 ...
- JS 中的offset、scroll、client总结
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
- Kafka 如何读取offset topic内容 (__consumer_offsets)
众所周知,由于Zookeeper并不适合大批量的频繁写入操作,新版Kafka已推荐将consumer的位移信息保存在Kafka内部的topic中,即__consumer_offsets topic,并 ...
- offset、client、scroll开头的属性归纳总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...
随机推荐
- JavaScript OOP（三）：prototype原型对象（即构造函数的prototype属性）
通过构造函数生成的实例化对象,无法共享属性或方法(即每个实例化对象上都有构造函数中的属性和方法):造成了一定的资源浪费 function Obj(name,age){ this.name=name; ...
- Linux 编程--三种常用的定时器
这节我们来探讨一下linux开发过程中常用的定时器,尤其在网络编程中被常常用到如heartbeat,断线重连等等.这里提供了三种定时器的方案,分别是链表形式的计时器,环型计时器,最小堆计时器.每个都有 ...
- labview生成可执行文件
labview生成可执行文件可以分为两种情况. 第一种,是电脑中有labview软件开发环境的情况 第二种,是电脑中没有安装labview软件开发环境 下面是一个简单的labview代码: 程序解释: ...
- jupyter的交互小工具-----ipyleaflet
ipyleaflet(一个用于创建简单的交互式地图的平移和缩放的库,ipyleaflet支持诸如多边形,标记和更一般的任何地理编码地理数据结构的注释) from ipyleaflet import M ...
- Jarvis OJ - [XMAN]level3 - Writeup——ret2libc尝试
这次除了elf程序还附带一个动态链接库 先看一下,很一般的保护 思路分析 在ida中查看,可以确定通过read函数输入buf进行溢出,但是并没有看到合适的目标函数 但是用ida打开附带的链接库,可以看 ...
- Unity 5--全局光照技术
本文整理自Unity全球官方网站,原文:UNITY 5 - LIGHTING AND RENDERING 简介全局光照,简称GI,是一个用来模拟光的互动和反弹等复杂行为的算法,要精确的仿真全局光照非常 ...
- C. Kyoya and Colored Balls(Codeforces Round #309 (Div. 2))
C. Kyoya and Colored Balls Kyoya Ootori has a bag with n colored balls that are colored with k diffe ...
- Cocos2d-x3.0 触摸事件
TouchableSpriteTest auto winSize = Director::getInstance()->getWinSize(); Point origin = Director ...
- cocos2d-x 托付模式的巧妙运用——附源代码（一）
先来说一下托付模式是什么.以下的内容摘要自维基百科: 托付模式是软件设计模式中的一项基本技巧.在托付模式中,有两个对象參与处理同一个请求.接受请求的对象将请求托付给还有一个对象来处理.托付模式是一项基 ...
- COM-IE-(2)
# -*- coding:UTF-8 -*- import sys from time import sleep import win32com.client from win32com.client ...