jQuery offset()

The jQuery offset() method sets or returns the offset coordinates of the selected elements.


When used to return the offset coordinates.


When used to set the offset coordinates.


When used to set the offset coordinates using a function.



  • It is a mandatory parameter that specifies the top and left coordinates values. The values are accepted in pixels.


  • It is an optional parameter.
  • The function parameter is used to return an object containing the top and left coordinates.


  • The index is an argument passed within the function.
  • It is used to give an index position to an element in the set.


  • This parameter is used to provide the current coordinates.


<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
$(document).ready(function() {
$("div").click(function () {
var offset = ("#lresult").html("left offset: <span>" + offset.left + "</span>.");
$("#tresult").html("top offset: <span>" + offset.top + "</span>.");
div { width:60px; height:60px; margin:5px; float:left; border-radius:120px}
<p>Click on any circle.</p>
<span id="lresult"> </span>
<span id="tresult"> </span>
<div style="background-color:turquoise"></div>
<div style="background-color:cyan"></div>
<div style="background-color:blue"></div>
<div style="background-color:skyblue"></div>
Please follow and like us:
Content Protection by DMCA.com