前端攻城狮学习笔记九：让你彻底弄清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的更多相关文章
- Android攻城狮学习笔记-进阶篇一
点击快速抵达: 第1章 AndroidManifest配置文件 第2章 使用ListView显示信息列表 第3章 使用DatePicker及TimePicker显示当前日期和时间 第4章 使用Grid ...
- Android攻城狮学习笔记—入门篇三
第十章 CheckBox 与其他控件类似 有自己的监听方法 实现监听 并定义被选中或取消后的操作 第十一章 RadioGroup和RadioButton RadioGroup是RadioButton的 ...
- Android攻城狮学习笔记—入门篇二
第七章 跑马灯 activity_main.xml<LinearLayout xmlns:android="http://schemas.android.com/apk/res/an ...
- Android攻城狮学习笔记—入门篇一
第一章 搭建Android开发环境 1.1 环境组成 JDK(Java Development Kit) Eclipse Android SDK(Software Development Kit) A ...
- 自己平时收集的css、html笔记（适合初级前端攻城狮）
实习了一年时间,陆陆续续记录下来一堆笔记,不过也丢失了一些... 以后会持续更新.扩展,现在把碰到的知识点归纳于此,方便翻阅 一.html部分 1.取消iPhone自动识别数字为拨打号码 <me ...
- web前端攻城狮整理的收藏夹
作为一名web前端开发工程师你的收藏夹存对了吗?下面是一份互联网上流传甚广的web前端开发收藏夹资源,包含学习网站.JS库.常用工具.常用插件.资讯书籍等资源.速速转存吧~ 一.学习网站 W3 ...
- 【大前端攻城狮之路】JavaScript函数式编程
转眼之间已入五月,自己毕业也马上有三年了.大学计算机系的同学大多都在北京混迹,大家为了升职加薪,娶媳妇买房,熬夜加班跟上线,出差pk脑残客户.同学聚会时有不少兄弟已经体重飙升,开始关注13号地铁线上铺 ...
- 【大前端攻城狮之路·二】Javascript&QA⼯程师
今天给大家分享的主题的是Javascript&QA⼯程师.看到这个主题,可能有人问:前端开发完就OK了,剩下的丢给测试就行,哪里还需要关心这些?但事实上呢,测试是前端开发非常重要的环节,也是迈 ...
- 2015Web前端攻城之路
2015目标成为一名合格的前端攻城狮. 养成计划: 1.html / css 2.js 3.ajax 4.框架 5.项目实战
随机推荐
- Git是目前世界上最先进的分布式版本控制系统
一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以 ...
- batch insert 1 million datas into mysql
最近尝试插入1百万条数据进db,以mysql为例. 1. 顺序insert 先写了个无脑的for循环作为base-line,插1万条耗时1m53s,根本不敢插1百万. foreach(var stud ...
- VS2013项目配置directx11
假定你已经安装好了direct11 SDK(官方下的既是最新版本)和VS2013,并在VS2013中建立了一个新工程. 用VS2013打开工程后,点击右键属性,选择VC++目录: 其中在包含目录中添加 ...
- 使用SharedPreferences进行数据存储
使用SharedPreferences进行数据存储 很多时候我们开发的软件需要向用户提供软件参数设置功能,例如我们常用的QQ,用户可以设置是否允许陌生人添加自己为好友.对于软件配置参数的保存,如果是w ...
- A380上11万一张的机票什么享受？来看看
上个月底,全球奢华航班排行榜出炉,新加坡航空头等舱荣登第一.不过,比头等舱更豪奢的,将近两万美元一张往返票的“套间”又是怎么样的呢? 新加坡航空的一名常旅客Derek Low就体验了一把全球最豪奢的坐 ...
- Mac下SVN服务器环境的搭建和配置（除展示图片外，所有命令在Linux/Unix下适用）
这几天领导没有安排工作,闲着没事就想把自己这两年做iOS开发时感觉知识有欠缺的地方想好好深入地补习一下,昨天和今天就计划好好学习下SVN和git的从创建和到原理,到命令,到界面的使用.一不小心被另一领 ...
- php中常用的运算符
运算符 运算符是告诉PHP做相关运算的标识符号. PHP运算符一般分为算术运算符.赋值运算符.比较运算符.三元运算符.逻辑运算符.字符串连接运算符.错误控制运算符. 1.变量名记得加“$” 符: 2. ...
- Android布局— — —表格布局
表格布局 以表格的形式来显示界面中的控件,表格的每一行为一个TableRow,每当一个控件添加到TableRow中,就生成一个单元格. 语法格式: <TableLayout xmlns:andr ...
- PAT 07-0 写出这个数
用拼音输出一个数字的各位数字之和,这个或许比上面的标题恰当.这里我第一次用到了sprintf()(stdio.h)这个函数,我本来是要找itoa()(stdlib.h)函数来着,查资料一看,说这个函数 ...
- 利用NTFS交换数据流隐藏文件
利用NTFS交换数据流隐藏文件 发表于 2012 年 12 月 15 日 由 晴刃 这篇文章介绍一下Windows的NTFS文件系统的ADS(alternate data streams,交换数据流) ...