jQuery offset() Methods, Easy To Learn jQuery offset() Methods

jQuery offset() Methods

The jQuery offset() method is used to set or returns the offset coordinates for the selected elements, relative to the document.

When used to return the offset : This method returns the offset coordinates of the FIRST matched element. It returns an object with 2 properties; the top and left positions in pixels.

When used to set the offset : This method sets the offset coordinates of ALL matched elements.

The jQuery offset() methods are following :

offset()
offsetParent()

Syntax

Return the offset coordinates :

$(selector).offset()

Set the offset coordinates :

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

Set offset coordinates using a function :

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

Parameter	Description
{top:value,left:value}	It is a mandatory parameter while setting the offset. It specifies the top and left co-ordinates in pixels.
function(index,currentoffset)	It is an optional parameter. It specifies a function that returns an object containing the top and left coordinates. *index* : Returns the index position of the element in the set *currentoffset* : Returns the current coordinates of the selected element

jQuery offset() Method

<!DOCTYPE html>
<html>
<head>
<title>jQuery offset() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        var x = $("h1").offset();
        alert("Top: " + x.top + " Left: " + x.left);
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
 
<body>
 
<h1><a href="http://www.freetimelearning.com" target="_blank">www.freetimelearning.com</a></h1>
 
<button type="button" class="btn">Click Here! (offset())</button>
 
</body>
</html>

Output :

jQuery offsetParent() Method

The offsetParent() method returns the first positioned parent element. An element can be positioned with jQuery, or with the CSS position property (relative, absolute, or fixed).

Syntax

$(selector).offsetParent()

<!DOCTYPE html>
<html>
<head>
<title>jQuery offsetParent() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").offsetParent().css("background-color", "#0099da");
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
.box{border:1px solid #F00; width:98%; position:absolute; left:10px; top:50px;}
.box_2{border: 1px solid #0099da; margin:50px; background-color:#F60;}
</style>
</head>
 
<body>
 
<button type="button" class="btn">Set background-color</button>
 
<div class="box">
  <div  class="box_2">
    
<p style="padding:10px; color:#FFF;">
<strong>Dummy Text :</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
    
  </div>
</div>
 
</body>
</html>

Output :

jQuery Tutorial