（转）详解JS位置、宽高属性之一：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)。
注意：如果当前元素设置的position为absolute,且有letf属性，那么 offsetleft还需要加上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)。
的不一样，对于这一点我也没有弄明白，如果有朋友知道请不吝赐教。
转自：http://blog.csdn.net/inuyasha1121/article/details/49149725
（转）详解JS位置、宽高属性之一：offset系列的更多相关文章
- js常用宽高属性
document.body.clientWidth //body对象的宽度 document.body.clientHeight //body对象的高度 document.documentElemen ...
- 详解js变量、作用域及内存
详解js变量.作用域及内存 来源:伯乐在线 作者:trigkit4 原文出处: trigkit4 基本类型值有:undefined,NUll,Boolean,Number和Strin ...
- 详解js和jquery里的this关键字
详解js和jquery里的this关键字 js中的this 我们要记住:this永远指向函数运行时所在的对象!而不是函数被创建时所在的对象.this对象是在运行时基于函数的执行环境绑定的,在全局环境中 ...
- JavaScript中的各种宽高属性
转自慕课网:http://www.imooc.com/article/14516 在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight.offsetHeight.scroll ...
- [转]javascript console 函数详解 js开发调试的利器
javascript console 函数详解 js开发调试的利器 分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...
- JavaScript及jQuery中的各种宽高属性图解
文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”. 作者声明:本 ...
- Kotlin——高级篇（二）：高阶函数详解与标准的高阶函数使用
在上面一个章节中,详细的讲解了Kotlin中关于Lambda表达式的语法以及运用,如果还您对其还不甚理解,请参见Kotlin--高级篇(一):Lambda表达式详解.在这篇文章中,多次提到了Kotli ...
- 详解js面向对象编程
转自:http://segmentfault.com/a/1190000000713346 基本概念 ECMA关于对象的定义是:”无序属性的集合,其属性可以包含基本值.对象或者函数.“对象的每个属性或 ...
- JS 各种宽高
1.window的各种宽高 outerWidth.innerWidth.outerHeight.innerHeight outerHeight 获取浏览器窗口外部的高度(单位:像素).表示整个浏览 ...
随机推荐
- MYSQL性能优化--分库分表
1.分库分表 1>纵向分表 将本来可以在同一个表的内容,人为划分为多个表.(所谓的本来,是指按照关系型数据库的第三范式要求,是应该在同一个表的.) 分表理由:根据数据的活跃度进行分离,(因为不同 ...
- Maven项目搭建（二）：Maven搭建SSM框架
上一章给大家讲解了如何使用Maven搭建web项目. 这次给大家介绍一下怎么使用Maven搭建SSM框架项目. 首先我们来看一下pom.xml的属性介绍: project: pom的xml根元素. p ...
- PMBOK 和 PRINCE2的技术不同的地方是什么
首先,PMBOK是一个框架指导,PRINCE2是一种实现方法. PMBOK是一种建议及最佳实践的集锦.PMBOK包含项目管理的工具和技术并且是一个指导,告诉我们如何做事情,在一种环境中怎样处理问题;而 ...
- 20155205 2016-2017-2 《Java程序设计》第4周学习总结
20155205 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 private成员会被继承,只不过子类无法直接存取,必须通过父类提供的方法来存取(若 ...
- 重温Javascript（二）
对象 可以想象成散列表,键值对,值可以是数据或函数 创建对象的方式 1.工厂模式 function createPerson(name, age, job){ var o = new Object() ...
- 【2017-04-01】JS字符串的操作、时间日期的操作、函数、事件、动画基础
一.字符串的操作 1.转大写: s.toLowerCase(); 2.转大写: s.toUpperCase(); 3.字符串的截取: s.substr(3,4); -从索引3开始截取,截取4 ...
- js的搜索遍历精讲
搜索算法应该算是每种算法的重点与难点了,本文将讲解JavaScript中的各种常用的遍历算法:希望对大家有所帮助. 深度优先遍历顺序:1245367 广度优先遍历:1234567 1.深度优 ...
- 【转】关于swf安全沙箱冲突：不能被本地访问
错误提示:SWF 文件不能被本地访问 不能访问本地只有仅限于文件系统的 SWF 文件和可信的本地 SWF 文件可以访问本地资源 错误信息:SecurityError:Error #2148: SWF ...
- POI 3.8读取2003与2007格式EXCEL（xls、xlsx）
废话少说直接上代码,记得是poi3.8版本啊.方法入口唯一,自动判断格式,使用接口引用,自动选择执行方法. 方法入口: public static ArrayList<String[]> ...
- 浩哥解析MyBatis源码（七）——DataSource数据源模块之托管数据源
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6675700.html 1 回顾 之前介绍的非池型与池型数据源都是MyBatis自己定义的内 ...