很多初学者对于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的更多相关文章

  1. Android攻城狮学习笔记-进阶篇一

    点击快速抵达: 第1章 AndroidManifest配置文件 第2章 使用ListView显示信息列表 第3章 使用DatePicker及TimePicker显示当前日期和时间 第4章 使用Grid ...

  2. Android攻城狮学习笔记—入门篇三

    第十章 CheckBox 与其他控件类似 有自己的监听方法 实现监听 并定义被选中或取消后的操作 第十一章 RadioGroup和RadioButton RadioGroup是RadioButton的 ...

  3. Android攻城狮学习笔记—入门篇二

    第七章  跑马灯 activity_main.xml<LinearLayout xmlns:android="http://schemas.android.com/apk/res/an ...

  4. Android攻城狮学习笔记—入门篇一

    第一章 搭建Android开发环境 1.1 环境组成 JDK(Java Development Kit) Eclipse Android SDK(Software Development Kit) A ...

  5. 自己平时收集的css、html笔记(适合初级前端攻城狮)

    实习了一年时间,陆陆续续记录下来一堆笔记,不过也丢失了一些... 以后会持续更新.扩展,现在把碰到的知识点归纳于此,方便翻阅 一.html部分 1.取消iPhone自动识别数字为拨打号码 <me ...

  6. web前端攻城狮整理的收藏夹

    作为一名web前端开发工程师你的收藏夹存对了吗?下面是一份互联网上流传甚广的web前端开发收藏夹资源,包含学习网站.JS库.常用工具.常用插件.资讯书籍等资源.速速转存吧~   一.学习网站   W3 ...

  7. 【大前端攻城狮之路】JavaScript函数式编程

    转眼之间已入五月,自己毕业也马上有三年了.大学计算机系的同学大多都在北京混迹,大家为了升职加薪,娶媳妇买房,熬夜加班跟上线,出差pk脑残客户.同学聚会时有不少兄弟已经体重飙升,开始关注13号地铁线上铺 ...

  8. 【大前端攻城狮之路·二】Javascript&QA⼯程师

    今天给大家分享的主题的是Javascript&QA⼯程师.看到这个主题,可能有人问:前端开发完就OK了,剩下的丢给测试就行,哪里还需要关心这些?但事实上呢,测试是前端开发非常重要的环节,也是迈 ...

  9. 2015Web前端攻城之路

    2015目标成为一名合格的前端攻城狮. 养成计划: 1.html / css 2.js 3.ajax 4.框架 5.项目实战

随机推荐

  1. windows-docker开发我常用命令 docker-machine ssh default

    docker-machine ssh default  docker logs test sudo systemctl start docker       docker tag IMAGEID ne ...

  2. (五)CoreData 使用 (转)

    第一次真正的使用CoreData,因此也会写下体会和心得...等有时间 Core Data数据持久化是对SQLite的一个升级,它是ios集成的,在说Core Data之前,我们先说说在CoreDat ...

  3. 面向对象之prototype,__proto__

    var person = function(name) { this.name = name }; person.prototype.getName = function() { return thi ...

  4. Apache虚拟主机(三)

    一.启用 httpd-vhosts.conf 在httpd.conf文件中启用 在文件中搜索:Virtual hosts #Virtual hosts虚拟主机 Include conf/extra/h ...

  5. android开发艺术探索

    android开发艺术探索  百度任玉刚 http://blog.csdn.net/singwhatiwanna/article/details/46810527

  6. HDU 3336 - Count the string(KMP+递推)

    题意:给一个字符串,问该字符串的所有前缀与该字符串的匹配数目总和是多少. 此题要用KMP的next和DP来做. next[i]的含义是当第i个字符失配时,匹配指针应该回溯到的字符位置. 下标从0开始. ...

  7. WPF如何实现类似iPhone界面切换的效果(转载)

    WPF如何实现类似iPhone界面切换的效果 (version .1) 转自:http://blog.csdn.net/fallincloud/article/details/6968764 在论坛上 ...

  8. ResultSet结果集判断是否为空

    目前亲测过能用的一个方法是: if(rs.next())//当前行有内容 { msg2 = "有这个活动!"; } else //rs对象为空表示查无此活动 { msg2 = &q ...

  9. 几种判断asp.net中session过期方法的比较

    方法一:最麻烦也是最容易想到的方法,在每个页面的page_load()方法里面判断: protected void Page_Load(object sender, EventArgs e) { if ...

  10. UIWebView的缓存策略,清除cookie

    缓存策略 NSURLRequestCachePolicy NSURLRequestUseProtocolCachePolicy缓存策略定义在 web 协议实现中,用于请求特定的URL.是默认的URL缓 ...