jQuery 中的 jQuery.offsetParent( ) 和 jQuery.offset( ) 有什么区别？

Z时代
2024-01-10
分类：综合

jQuery.offsetParent( ) 方法

该offsetParent( )方法返回一个 jQuery 集合，其中包含第一个匹配元素的定位父元素。

这是具有位置的元素的第一个父元素（如相对或绝对）。此方法仅适用于可见元素。

例子

您可以尝试运行以下代码以了解如何使用jQuery和方法 -jQuery.offsetParent()jQuery.parent()

<html>
   <head>
      <title>jQuery offsetParent() method</title>
      <script src = "https://cdn.staticfile.org/jquery/2.1.3/jquery.min.js"></script>
       
      <script>
         $(document).ready(function() {
           
            $("div").click(function () {
               var offset = $(this).offsetParent();
               $("#lresult").html("left offset: <span>" +
                  offset.offset().left + "</span>.");
               $("#tresult").html("top offset: <span>" +
                  offset.offset().top + "</span>.");
            });
               
         });
      </script>
       
      <style>
         div {
             width:60px;
             height:60px;
             margin:5px;
             float:left;
             
         }
      </style>
   </head>
   
   <body>
   
      <p>Click on any square:</p>
      <span id = "lresult"> </span>
      <span id = "tresult"> </span>
       
      <div  style = "background-color:blue;">
         <div  style = "background-color:pink;"></div>
      </div>
 
      <div  style = "background-color:#123456;">
         <div  style = "background-color:#f11;"></div>
      </div>
   </body>
</html>

jQueryoffset()方法

该offset( )方法获取第一个匹配元素相对于文档的当前偏移量（以像素为单位）。

例子

您可以尝试运行以下代码来学习如何使用offset()jQuery 中的方法-

<html>
   <head>
      <title>jQuery offset() method</title>
      <script src = "https://cdn.staticfile.org/jquery/2.1.3/jquery.min.js"></script>
       
      <script>
         $(document).ready(function() {
           
            $("div").click(function () {
               var offset = $(this).offset();
               $("#lresult").html("left offset: <span>" +offset.left+ "</span>.");
               $("#tresult").html("top offset: <span>" +offset.top+ "</span>.");
            });
               
         });
      </script>
       
      <style>
         div {
             width:60px;
             height:60px;
             margin:5px;
             float:left;
         }
      </style>
   </head>
   
   <body>
   
      <p>Click on any square:</p>
      <span id = "lresult"> </span>
      <span id = "tresult"> </span>
       
      <div style = "background-color:blue;"></div>
      <div style = "background-color:pink;"></div>
      <div style = "background-color:#123456;"></div>
      <div style = "background-color:#f11;"></div>
       
   </body>
</html>