What is the difference between jQuery.offsetParent( ) and jQuery.offset( ) in jQuery?

jQueryWeb DevelopmentFront End Technology

jQuery.offsetParent( ) method

The offsetParent( ) method returns a jQuery collection with the positioned parent of the first matched element.

This is the first parent of the element that has position (as in relative or absolute). This method only works with visible elements.

Example

You can try to run the following code to learn how to work with jQuery.offsetParent() and jQuery.parent() methods in jQuery −

Live Demo

<html>

   <head>
      <title>jQuery offsetParent() method</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/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>

jQuery offset() method

The offset( ) method gets the current offset of the first matched element, in pixels, relative to the document.

Example

You can try to run the following code to learn how to use offset() method in jQuery-

Live Demo

<html>

   <head>
      <title>jQuery offset() method</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/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>
raja
Published on 17-Dec-2017 12:52:01
Advertisements