`

让你彻底弄清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 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)。

注意:这里的公式里面的括号里面的不是减法的减号

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

分享到:
评论

相关推荐

    RIP offset list

    3. 使用 Offset List 时,需要弄清是需要某一台单独的路由器向它的所有邻居路由器广播偏移修改后的通告,还是某台单独的路由器接收偏移修改后的通告。 实验结果表明,当 R2 配置偏移列表时,只要方向含有 IN 时,...

    很不错的CSS学习资料,让你彻底轻松弄懂CSS

    【标题】:“很不错的CSS学习资料,让你彻底轻松弄懂CSS” 这是一份精心整理的CSS学习资源,旨在帮助学习者全面理解并掌握CSS(层叠样式表)这一重要的前端技术。CSS是网页设计和开发不可或缺的部分,它负责定义...

    一幅图弄清DFT与DTFT,DFS的关系.pdf

    ### DFT、DTFT与DFS的关系解析 #### 引言 在数字信号处理领域中,经常会出现诸如DFT(离散傅立叶变换)、DTFT(离散时间傅立叶变换)、DFS(离散傅立叶级数)以及FFT(快速傅立叶变换)等概念。...

    一张图弄清mysql内存结构

    一张图弄清mysql内存结构,内存中都有什么,多mysql原理及后续问题排查、优化很有帮助,推荐给大家

    弄清几个与从参考系有关的问题-(2).doc

    弄清几个与从参考系有关的问题-(2).doc

    面试自我介绍时要弄清的问题精选.doc

    在自我介绍时,你需要清楚地表达你的职业目标,让面试官知道你对自己的未来有明确的设计。这不仅包括你的长期职业规划,也包括你期望在申请的岗位上达成的具体目标。确保你的目标与公司的业务目标相吻合,这样可以...

    2019中考化学复习:考前弄清重点实验原理.pdf

    2019年中考化学复习中,一...总之,考前弄清重点实验原理是中考化学复习的重要一环。通过对实验原理的深入理解,学生不仅能够应对考试中的相关问题,还能在今后的学习和研究中,应用这些基本原理解决更复杂的化学问题。

    用电磁波方法弄清了地震的发生机制.pdf

    《用电磁波方法弄清了地震的发生机制》这篇文献探讨了利用电磁波技术来深入理解地震发生机制的科学原理和应用。在地震学研究中,电磁波作为一种重要的探测手段,已经在预测、监测以及分析地震活动方面发挥了关键作用...

    用PS之前先弄清三个问题.pdf

    这些基础知识将帮助你更好地理解和操作图像处理。 1. **颜色**: - 颜色模式:不同颜色模式对应不同的媒介。HSB模式(色相、饱和度、亮度)与人眼感受细胞关联,RGB用于显示器显示,CMYK适用于印刷,而Lab模式模拟...

    普通开关电源如何弄清EMC设计

    开关电源在现代电子设备中扮演着重要角色,尤其在通信、控制和计算机系统中,得益于其小巧的体积和较高的功率因数。然而,开关电源在运行过程中会产生的电磁干扰(EMI)对其广泛应用造成了限制。...

    前端工程师新手必读:掌握网页设计的基本技能和弄清设计的概念

    学习DOM操作、事件处理、AJAX异步通信等,可以让页面更具活力和用户体验。 除此之外,前端工程师还需要了解浏览器兼容性问题、性能优化策略、版本控制工具(如Git)、构建工具(如Webpack)以及现代化框架(如React...

    弄清地理中的图像系统作文.doc

    在地理学习中,图像系统是理解复杂地理概念和现象的关键工具。高考地理试题常常采用全新的图像,这使得一些学生感到困惑,甚至放弃课本,转向难题题集。然而,无论试题如何创新,其基础都源于教科书中的基本图像知识...

    起舞弄清影钢琴曲谱双手数字简谱.pdf

    从给定文件的信息来看,这份文件似乎是一份钢琴曲谱,具体的标题是《起舞弄清影》,并且采用的是双手数字简谱的形式进行记录。首先,我们可以从中提取出以下几点IT相关知识: 1. 数字简谱的介绍: ...

    用PS之前先弄清三个问题.docx

    在使用Photoshop(PS)进行图像处理之前,了解并掌握几个关键概念至关重要。这些概念包括颜色模式、分辨率和图层,它们是PS操作的基础。 首先,我们要理解颜色模式。颜色模式决定了图像在不同媒介上的显示效果。...

    AVR—使用定时器必须弄清的几个概念!

    在AVR单片机中使用定时器时,需要掌握几个核心概念,以便正确和高效地进行定时器编程。AVR单片机包含多个定时器模块,其中在Mega16型号中,包含T/C0、T/C1和T/C2三个独立的定时器模块。T/C0和T/C2是8位定时器,而T/...

    AVR—使用定时器必须弄清的几个概念

    在微控制器(MCU)中,定时器是一个关键的硬件模块,它能够在CPU不直接干预的情况下独立运行。在AVR单片机系列,比如M16,存在三个独立的定时器模块,即T/C0、T/C1和T/C2。T/C0和T/C2是8位定时器,而T/C1是一个16位...

    深入挖掘MFC的源代码,弄清MFC的内幕

    《深入挖掘MFC的源代码,揭示MFC的内幕》 MFC,全称为Microsoft Foundation Classes,是微软提供的一套用于开发Windows应用程序的C++类库。本文旨在帮助初学者和经验丰富的开发者更好地理解和掌握MFC的应用程序生命...

    买扣肉本本——从弄清移动CPU型号开始.pdf

    在选择笔记本电脑时,了解移动CPU的型号至关重要,因为这直接影响到电脑的性能表现。本文主要探讨了Intel移动处理器的型号命名规则及其背后的含义,帮助消费者理解如何区分不同型号的CPU,避免购买时的困惑。...

    一文弄清物联网的OTA

    本文来自于csdn,OTA固件升级可让开发人员随着时间的推移增强产品功能,并修补产品缺陷。最后,选择可满足您的应用需求,更多详细内容请阅读下文。许多嵌入式系统部署在人类操作员很难或无法访问的地方。对于物联网...

Global site tag (gtag.js) - Google Analytics