• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • offsetParent()

    取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是,CSS 的 position 属性是 relative, absolute,或 fixed 的元素。

    .offsetParent()
    • 这个方法不接受任何参数。

    如果提供一个代表一系列DOM元素的jQuery对象,.offsetParent()方法允许我们搜索DOM树里面该元素的祖先元素,然后构建一个新的jQuery对象,该jQuery对象包着最近的被定过位的祖先元素。一个元素被定位的意思是该元素包含一个位置属性relative,absolute,或者fixed.这对于计算元素的位置很方便,计算位置可以帮助实现动画或者将元素放在页面上的特定位置。

    例如如果一个页面包含一个嵌套的列表,里面有一个被定过位的元素:

    <ul class="level-1">
      <li class="item-i">I</li>
      <li class="item-ii" style="position: relative;">II
        <ul class="level-2">
          <li class="item-a">A</li>
          <li class="item-b">B
            <ul class="level-3">
              <li class="item-1">1</li>
              <li class="item-2">2</li>
              <li class="item-3">3</li>
            </ul>
          </li>
          <li class="item-c">C</li>
        </ul>
      </li>
      <li class="item-iii">III</li>
    </ul>
    

    如果我们从项目 A开始,我们可以通过下面的方法找到它的最近的被定过位的祖先元素:

    $('li.item-a').offsetParent().css('background-color', 'red');
    

    这将改变列表项 II的颜色,因为它被定位了。

    例子

    寻找item "A"的offsetParent

    <!DOCTYPE html>
    <html>
    <head>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
     
    <ul class="level-1">
      <li class="item-i">I</li>
      <li class="item-ii" style="position: relative;">II
        <ul class="level-2">
          <li class="item-a">A</li>
          <li class="item-b">B
            <ul class="level-3">
              <li class="item-1">1</li>
              <li class="item-2">2</li>
              <li class="item-3">3</li>
            </ul>
          </li>
          <li class="item-c">C</li>
        </ul>
      </li>
      <li class="item-iii">III</li>
    </ul>
    <script>$('li.item-a').offsetParent().css('background-color', 'red');</script>
     
    </body>
    </html>
    
    • I
    • II
      • A
      • B
        • 1
        • 2
        • 3
      • C
    • III

    上篇:offset()

    下篇:scrollTop()