`

无意中看到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>

     

     

     

     

     

     

     

     

     

     

    分享到:
    评论

    相关推荐

      jQuery中offsetParent()方法用法实例

      主要介绍了jQuery中offsetParent()方法用法,实例分析了offsetParent()方法的功能、定义及返回匹配元素所有祖先元素中第一个采用定位的祖先元素时的使用技巧,需要的朋友可以参考下

      JS OffsetParent属性深入解析

      offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根...

      clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.

      clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.

      offsetparent计算

      offsetparent计算 offsetparent区分以下几种情况: 内部div不是relative/absolute,外部div是relative/absolute

      【JavaScript源代码】JavaScript offsetParent案例详解.docx

      offsetParent定义:那么offsetParent就是距离该子元素最近的进行过定位的父元素(position:absolute relative fixed),如果其父元素中不存在定位则offsetParent为:body元 素 2. 根据定义分别存在以下几种情况 ...

      js parentElement和offsetParent之间的区别

      这里主要说的是 offsetParent 属性,这个属性在 MSDN 的文档中也没有解释清楚,这就让人更难理解这个属性。 这几天在网上找了些资料看看,再加上自己的一些测试,对此属性有了那么一点的了解,在这里总结一下。 要...

      Javascript拖拽系列文章1之offsetParent属性第1/3页

      第一篇就先讲讲Javascript中的offsetParent属性吧。 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ element.offsetParent Summary offsetParent returns a ...

      Jquery搜索父元素操作方法

      主要介绍了Jquery搜索父元素操作方法,实例分析了parents、cloest、parent、parentsUtil及offsetParent方法的使用技巧,需要的朋友可以参考下

      简单谈谈offsetleft、offsetTop和offsetParent

      ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个是定位过的,返回值就是body元素 ele.offsetLeft和ele.offsetTop取值问题,分多种情况: ...

      JavaScript中textRange对象使用方法小结

      文本范围让您可以选择性的将字符、单词和句子从文档中挑选出来。TextRange对象是在HTML文档将要显示的文本流上建立开始和结束位置的抽象对象。  下面是TextRange的常用属性与方法:  属性 boundingHeight 获取绑定...

      offsetParent 算法分析

      当调用元素 A 的 offsetParent 属性时,必须按以下算法返回元素。 以下任一条件为真时,返回 null,并停止本算法。 A 是根元素。 A 是 HTML 的 body 元素。 元素 A 的 position 属性计算值是 fixed。注 1 如果 A 是 ...

      jquery中获得元素尺寸和坐标的方法整理

      一、获得坐标 1.offset() offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。... 3.offsetParent() offsetParent() 方法返回最近的祖先定位元素。 定位元素指的是元素的 CSS position 属性被设置为 relative、

      JavaScript Table行定位效果

      并在GetBgColor获取背景色程序中使用: while (bgc == this._transparent && (node = node.parentNode) != document) { bgc = CurrentStyle(node).backgroundColor; } return bgc == this._transparent ? "#fff" :...

      固定表头最简单的方法(仅IE有效)

      固定表头最简单的方法(仅IE有效) 不需要使用top:[removed]this.offsetParent.scrollTop - 1);样式

      仿excel、锁定表头和表列-3种方法

      1、js通过样式的方法、了解parentElement和offsetParent的原理,自己的布局不一样,css也就不一样,这种方法是浏览器可能会比较慢的哦!! 2、2\3方法都是用jquery也有仿excel的方法,自己也可以去网上找一找

      【JavaScript源代码】JavaScript offset实现鼠标坐标获取和窗口内模块拖动.docx

       offset 即偏移量,使用 offset 系列相关属性可以 动态的 获取该元素的位置(偏移)、大小等,如: 元素距离带有定位父元素的位置 获取元素自身的大小(宽度高度) 注:返回的数值不带单位 offset 系列常用的属性...

      js获取元素到文档区域document的(横向、纵向)坐标的两种方法

      获取页面中元素到文档区域document的横向、纵向坐标的两种方法及其比较 在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法: 一:通过叠加元素对象和它的offsetParent...

    Global site tag (gtag.js) - Google Analytics