jQuery | offset() 与示例

offset() 方法是 jQuery 中的一个内置方法，用于设置或返回所选元素的偏移坐标。

句法：

• $(selector).offset()

  参数：不需要参数。

• $(selector).offset({top:value, left:value})

  参数：设置偏移量时需要该参数。

• $(selector).offset( function(index, offset) )

  参数：此方法使用函数设置偏移量。此方法中使用的参数是可选的。 index参数用于返回设置元素的位置，offset返回被选元素的坐标。

返回值：此方法返回匹配元素的坐标。

下面的例子说明了 jQuery 中的 offset() 方法：

示例 1：在下面的代码中，这将返回第一个匹配元素的坐标。

    
        The offset Method
        
        
          
        
        
            $(document).ready(function() {
                $("button").click(function() {
                    var Geek = $("p").offset();
                    alert("Top coordinate: " + Geek.top + 
                             "   Left Coordinate: " + Geek.left);
                });
            });
        
        
            div {
                width: 60%;
                min-height: 150px;
                padding: 20px;
                font-size: 25px;
                border: 2px solid green;
                font-weight: bold;
                color:green;
            }
        
    
       
    
        
        
            Welcome to GeeksforGeeks!
            click Here!
        
    

输出：

示例 2：

   
       The offset Method
       
       
         
       
       
            $(document).ready(function() {
                $("button").click(function() {
                    $("p").offset({top: 100, left: 140});
             });
         });
      
      
         div{
             width: 300px;
             min-height: 100px;
             color:green;
             font-weight: bold;
             padding:20px;
             font-size: 25px;
             border: 2px solid green;
         }
      
   
   
      
         
         Welcome to GeeksforGeeks!
         Click Here!
      
   

输出：