jQuery offset() Method

Quiz

The offset() method in jQuery is used to return or set the current coordinates of an element relative to the document.

Following is the usage of the offset() method:

Get coordinates: When called without any arguments, it returns the current coordinates of the first matched element. It returns an object with 2 properties; the top and left positions in pixels.
Set coordinates: When called with an argument (an object containing top and left properties), it sets the coordinates of all the matched elements.

Syntax

We have different syntaxes for setting and getting the offset coordinates for the selected elements −

Following is the syntax to return the offset coordinates −

$(selector).offset()

Following is the syntax to set the offset coordinates −

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

Following is the syntax to set the offset coordinates using a function −

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

Parameters

This method accepts the following parameters −

{top:value,left:value}: An object specifying the new top and left coordinates in pixels.
function(index, currentOffset): A function that returns an object with top and left properties.

index: The index position of the element in the jQuery collection.
currentoffset: An object containing the current top and left offset of the element.

Example 1

In the following example, we are using the offset() method to return the offset coordinates of a "div" element −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        var offset = $("div").offset();
        alert("Top: " + offset.top + ", Left: " + offset.left);
      });
    });
  </script>
</head>
<body>
  <div style="border: 2px solid black; margin-top: 50px; margin-left: 100px; width: 100px; height: 100px; background-color: yellow;">Div Element</div>
  <button>Get Offset</button>
</body>
</html>

When we click the button, it returns the offset coordinates of a "<p>" element

Example 2

In this example, we are setting the offset coordinates of the "div" element −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("div").offset({ top: 150, left: 100 });
      });
    });
  </script>
</head>
<body>
  <div style="border: 2px solid black; width: 100px; height: 100px; background-color: yellow;">Element</div>
  <button>Set Offset</button>
</body>
</html>

If we click the button, the <div> element will be positioned at the provided offset coordinates.

Example 3

Here, we are using the function parameter of the offset() method −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("div").offset(function(index, currentOffset){
          return { top: currentOffset.top + 20, left: currentOffset.left + 30 };
        });
      });
    });
  </script>
</head>
<body>
  <div style="border: 2px solid black; width: 100px; height: 100px; background-color: yellow; position: relative; top: 50px; left: 100px;">Element</div>
  <button>Set Offset</button>
</body>
</html>

When we click the button, it sets the offset coordinates for <div> element as provided.

jquery_ref_html.htm

Print Page