ylbtech-JavaScript：让你彻底弄清offset
1.返回顶部
1、

　很多初学者对于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)。

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

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

JavaScript：让你彻底弄清offset的更多相关文章

  1. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  2. 前端攻城狮学习笔记九：让你彻底弄清offset

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

  3. 让你彻底弄清offset

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

  4. JavaScript事件坐标区别（offset，client，page）

    学习笔记. 1. offset:其定位原点是当前元素左上角 2. client:其定位原点是当前窗口左上角 3. page:其定位原点是当前页面左上角 下面来验证一下. 先上代码: <!doct ...

  5. JavaScript 特效之四大家族（offset/scroll/client/event）

      三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制)   三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以 ...

  6. JavaScript、关于元素的offset~和client~

    1.偏移量(offset dimension)   =>offsetLeft(元素距离其父元素左边框(/上边框)的距离) =>offsetTop =>offsetWidth(元素的宽 ...

  7. JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 分类： JavaScript HTML+CSS 2015-05-27 16:42 635人阅读 评论(0) 收藏

    原文地址:http://caibaojian.com/js-name.html JS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词 ...

  8. 这些年，我收集的JavaScript代码

    这些年,我收集的JavaScript代码(一) http://www.cnblogs.com/jscode/archive/2012/07/25/2605395.html 这些年,我收集的JavaSc ...

  9. 差别client、offset、scroll系列以及event的几个距离属性

    element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个仅仅读属性,它包含了: css width + ...

随机推荐

  1. MyEclipse设置默认注释的格式

    首先选菜单windows-->preferenceJava-->Code Style-->Code Templates code-->new Java files 然后选中点编 ...

  2. Spark Streaming概念学习系列之SparkStreaming性能调优

    SparkStreaming性能调优 合理的并行度 减少批处理所消耗时间的常见方式还有提高并行度.有以下三种方式可以提高并行度: 1.增加接收器数目 有时如果记录太多导致单台机器来不及读入并分发的话, ...

  3. 树莓派-基于aria2实现离线下载

    安装aria2 aria2是linux下的一个下载工具,它支持http.bt种子.磁力链接三种方式下载 sudo apt-get install aria2 配置aria2 aria2支持命令参数,也 ...

  4. Core篇——初探IdentityServer4（客户端模式，密码模式）

    Core篇——初探IdentityServer4(客户端模式,密码模式) 目录 1.Oatuth2协议的客户端模式介绍2.IdentityServer4客户端模式实现3.Oatuth2协议的密码模式介 ...

  5. X264编码实现

    H264 H264的官方测试源码,由德国hhi研究所负责开发.特点:实现了264所有的特性,由于是官方的测试源码,所以学术研究的算法都是在JM基础上实现并和JM进行比较.但其程序结构冗长,只考虑引入各 ...

  6. 关于react-router-dom入门配置

    react-router-dom入门配置 配置 参考:github https://reacttraining.com/react-router/web/api/BrowserRouter 1. 导入 ...

  7. Android学习——碎片Fragment的使用

    一.碎片的简单用法(实现在一个活动中添加两个碎片,并让这两个碎片平分活动空间) 1.新建一个FragmentTest项目: 新建一个左侧碎片布局left_fragment.xml,代码如下:(只放置一 ...

  8. 移植最新u-boot（裁剪和修改默认参数）

    [参考]韦东山 教学笔记 ================================================== 最简单的bootloader的编写步骤: 1. 初始化硬件:关看门狗.设 ...

  9. MySQL 5.6 Reference Manual-14.2 InnoDB Concepts and Architecture

    14.2 InnoDB Concepts and Architecture 14.2.1 MySQL and the ACID Model 14.2.2 InnoDB Multi-Versioning ...

  10. outlook导入配置文件

    公司入.离职人员越来越多,所以产生了一个自动化配置邮件的想法 查看了一下资料,outlook有导入配置文件的方法可用. 利用otc工具,打开office2010的安装文件夹,执行setup.exe / ...