jQuery offset() Method

jQuery | offset() Method: Learn about the jQuery offset() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 16, 2022

offset() Method

Sometimes it is necessary to know about the positions of the elements placed on the page. So that we can plan the designing of the further document according to it. The offset() method helps to do the same. The offset() method sets and returns the offset (position) of the selected element. It returns only the top and the left distances from the document top and left respectively in pixels.

offset() Method Syntax

$('selector').offset();
$('selector').offset({top: val, left: val});

If no parameter is passed in this method, then it will return the offset of the selected element. And if the top and left values are passed, then it will set the position of the respective selected element. It used two attributes – top & left in order to access the top and left positions of the element respectively. The offset() method returns the offset of the first element matched and sets the offset of all the elements matched. Below given example showcases the implementation of the offset() method in jQuery.

jQuery offset() Method Example 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery - Offset</h2>
    <p>Click the button to get the offset of the selected element.</p>
    <button>Offset</button>
    <hr>
    <img style="height: 150px;" id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
    <hr>
    <h3 id="one" style="color:crimson ;"></h3>
    <h3 id="two" style="color:crimson ;"></h3>
  </body>
  
  <script type="text/javascript">
    // GET
    $(document).ready(function(){
        $('button').click(function(){
            var property = $('img').offset();
            $('#one').html('Top: ' + property.top);
            $('#two').html('Left: ' + property.left);
        })
    });
  </script>
</html>

Output:

jQuery offset() Method Example 2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery - Offset</h2>
    <p>Click the button to set the offset of the selected element.</p>
    <button>Offset</button>
    <hr>
    <img style="height: 150px;" id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
    <hr>
    <h3 id="one" style="color:crimson ;"></h3>
    <h3 id="two" style="color:crimson ;"></h3>
  </body>
  
  <script type="text/javascript">
    // SET
    $(document).ready(function(){
        $('button').click(function(){
            $('img').offset({top: 150, left: 150});
        })
    });
  </script>
</html>

Output:

jQuery prop() Method

jQuery position() Method

Comments and Discussions!

Load comments ↻