zoukankan      html  css  js  c++  java
  • offsetParent和parentElement的区别

    parentElement 在msdn的解释是Retrieves the parent object in the object hierarchy.

    而offsetParent在msdn的解释是Retrieves a reference to the container object that defines the offsetTop and offsetLeft properties of the object. 这个解释有些模糊。我们再来看看他的remarks

    Most of the time the offsetParent property returns the body object.

    大多说offsetParent返回body


    Note  In Microsoft® Internet Explorer 5, the offsetParent property returns the TABLE object for the TD object; in Microsoft® Internet Explorer 4.0 it returns the TR object. You can use the parentElement property to retrieve the immediate container of the table cell.
     
    对于IE 5.0以上,TD的offsetParent返回Table。

    但是msdn并没有讨论在页面td元素中存在绝对/相对定位时offsetParent的值。

    以下是我个人总结的规律

    在td中的元素会把第一个绝对/相对定位的hierarchy parent当作offsetParent,如果没有找到需要分三种情况讨论

      一,如果该元素没有绝对/相对定位,则会把td当作offsetParent

      二,如果该元素绝对/相对定位并且table没有绝对/相对定位,则会把body当作offsetParent

      三,如果该元素绝对/相对定位并且table绝对/相对定位,则会把table当作offsetParent

    看一下示例代码

    1.<BODY >
    <TABLE BORDER=1 ALIGN=right>
      <TR>
        <TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv">sondiv</div></div></TD>
      </TR>
    </TABLE>


    运行结果parentdiv.offsetParent.tagName IS "body"

                    sondiv.offsetParent.id     IS "parentdiv"

    2.<BODY >
    <TABLE BORDER=1 ALIGN=right>
      <TR>
        <TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
      </TR>
    </TABLE>

    运行结果parentdiv.offsetParent.tagName IS "body"

                    sondiv.offsetParent.id     IS "parentdiv"

    3.<BODY >
    <TABLE BORDER=1 ALIGN=right>
      <TR>
        <TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
      </TR>
    </TABLE>


    运行结果parentdiv.offsetParent.tagName IS "TD"

                    sondiv.offsetParent.tagName    IS "body"

    4.<BODY >
    <TABLE BORDER=1 ALIGN=right>
      <TR>
        <TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv">sondiv</div></div></TD>
      </TR>
    </TABLE>


    运行结果parentdiv.offsetParent.tagName IS "TD"

                    sondiv.offsetParent.tagName    IS "TD"

    5.<BODY >
    <TABLE BORDER=1 ALIGN=right style="position:relative">
      <TR>
        <TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
      </TR>
    </TABLE>

    运行结果parentdiv.offsetParent.tagName IS "Table"

                    sondiv.offsetParent.tagName    IS "parentdiv" 

  • 相关阅读:
    Windows Server 2008安装Memcached笔记
    解决powerDesinger12逆向工程报错:Unable to list the tables
    冒泡排序算法
    ASP.NET面试题(推荐_有答案)
    ASP.NET服务器控件分类简介
    将excel文件中的数据导入导出至SQL数据库中(Microsoft.Jet.OLEDB.4.0和Microsoft.ACE.OLEDB.12.0|office2003和office2007)
    关于sql access excel以及在web.config中数据库连接字符串的写法
    ODBC / OLEDB___DAO / RDO / ADO
    什么是CSV格式文档
    AppSettings和ConnectionStrings的区别
  • 原文地址:https://www.cnblogs.com/liping13599168/p/653076.html
Copyright © 2011-2022 走看看