`
thtwin
  • 浏览: 161070 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Javascript拖拽之offsetParent属性

    博客分类:
  • JS
阅读更多
offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。 当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性 返回 null 。

句法
      parentObj = element.offsetParent
变量
      · parentObj 是一个元素的引用,当前元素的偏移量在其中计算。

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

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

<html>
      <head>
            <title>Untitled Document</title>
            <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()">
            <div id="parent">
                  <p id="sonObj">测试OffsetParent属性
            </div>
      </body>
</html>

以上代码的Alert警告框中显示的为“BODY”。

<html>
      <head>
            <title>Untitled Document</title>
            <style type="text/css">
                  #parent{
                        position:absolute;
                        <!--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()">
            <div id="parent">
                  div测试代码<p id="sonObj">测试OffsetParent属性
            </div>
      </body>
</html>

以上代码的Alert警告框中显示的为“DIV”。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics