无意中看到offsetParent,顺便就搜了下使用方法

  • offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过 CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素;在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 ”none”时(译注:IE和Opera除外),offsetParent属性 返回 null 。
  • 1.当某个元素及其父元素都未进行CSS定位时,则这个元素的offsetParent属性的取值为根元素。更确切地说,这个元素的各种偏移量计算(offsetTop、offsetLeft等)的参照物为Body元素。(其实无论是标准兼容模式还是怪异模式,根元素都为Body元素)

    --------------------------example----返回body-----------------------------

  • <script type="text/javascript" language="JavaScript">
  •  

  •  function offset_init(){
      var pElement = document.getElementById("sonObj");
      parentObj = pElement.offsetParent;
      alert(parentObj.tagName);
     }
  • </script>
  • <body onload="offset_init()">

     

     <div id="parent">
      <p id="sonObj">测试OffsetParent属性</p>
     </div>
    </body>

    -----------------------------------------------------------------------------

     

    2.当某个元素的父元素进行了CSS定位时(relative定位或者absolute定位),则这个元素的offsetParent属性的取值为其父元素。更确切地说,这个元素的各种偏移量计算(offsetTop、offsetLeft等)的参照物为其父元素。

     

    --------------------------example------返回div---------------------------

    <style type="text/css">
    #parent{
     position:relative;<!-- position:absolute;-->
     
     left:25px;
     
     top:188px;
     
     border:1px solid black;
     
    }
     
    </style>
     
    <script type="text/javascript" language="JavaScript">
    function offset_init(){
     
     var pElement = document.getElementById("sonObj");
     
     parentObj = pElement.offsetParent;
     
     alert(parentObj.tagName);
    }
     
    </script>

    <body onload="offset_init()">

      <div id="parent">div测试代码
       <p id="sonObj">
        测试OffsetParent属性
       </p>
      </div>

     

     </body>
    ------------------------------------------------------------------------------

     

    3.当某个元素及其父元素都未进行CSS定位时(absolute或者relative),则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近,并且已进行了CSS定位的元素。

     

    ----------------------------example----------返回h1----------------------

    <style type="text/css">
    #Grandfather{
     
     position:relative;
     
     left:25px;
     
     top:188px;
     
     border:1px solid black;
     
    }
     
    </style>

    <script type="text/javascript" language="JavaScript">
    function offset_init(){
     
     var pElement = document.getElementById("sonObj");
     
     parentObj = pElement.offsetParent;
     
     alert(parentObj.tagName);
    }
     
    </script>

     

    <body onload="offset_init()">


     <h1 id="Grandfather"><div id="parent"><p id="sonObj">测试OffsetParent属性</p></div></h1>

    </body>

     

    -----------------------------------------------------------------------------

     

    4.当只有某个元素进行了CSS定位,其父元素及其DOM结构层次上都未进行CSS定位时,则这个元素的offsetParent属性的取值为HTMLBODYElement。更确切地说,这个元素的各种偏移量计算(offsetTop、 offsetLeft等)的参照物为Body元素。

    --------------------------example-------返回body-------------------------------

    <style type="text/css">
    #sonObj{
     
     position:relative;
     
     left:25px;
     
     top:188px;
     
     border:1px solid black;
     
    }
     
    </style>
     
    <script type="text/javascript" language="JavaScript">
    function offset_init(){
     
     var pElement = document.getElementById("sonObj");
     
     parentObj = pElement.offsetParent;
     
     alert(parentObj.tagName);
    }
     
    </script>
    </head>
    <body onload="offset_init()">

    <h1 id="Grandfather">
      <div id="parent">div测试代码
       <p id="sonObj">
         测试OffsetParent属性
       </p>
      </div>
    </h1>

     

     

     

     

     

     

     

     

     

     

    你可能感兴趣的:(offsetParent)