Definition and usage of offset() method:
This method returns or sets the offset of the matched element relative to the document object.
Syntax Structure One:
$(selector).offset()
Gets the relative offset of the matching element in the current document.
The returned object contains two integer genera: top and left.
This method is only valid for visible elements.
Example code:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.father{
border:1px solid black;
width:400px;
height:300px;
padding:10px;
margin:50px;
}
.children{
height:150px;
width:200px;
margin-left:50px;
background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8."></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
a=$(".children").offset();
alert("The offset coordinates of the element are:"++"|"++"");
})
})
</script>
</head>
<body>
<div class="father">
<div class="children"></div>
</div>
<button>Get the coordinates of the element</button>
</body>
</html>
The above code can pop up the offset of the sub-div relative to the document.
Syntax Structure Two:
$(selector).offset(value)
Sets the coordinates of the matching element relative to the document object.
The offset() method allows us to reset the position of the element. The position of this element is relative to the document object.
If the original position style attribute of the object is static, it will be changed to relative to realize relocation.
Parameter list:
Parameter Description
value Specifies the top and left coordinates in pixels.
Possible values:
1. Value pairs, such as {top:200, left:10}.
2. Object with top and left attributes.
Example code:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
.father{
border:1px solid black;
width:400px;
height:300px;
}
.children{
height:150px;
width:200px;
background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8."></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".children").offset({top:100,left:100})
})
})
</script>
</head>
<body>
<div class="father">
<div class="children"></div>
</div>
<button>Click to set offset</button>
</body>
</html>
The above code can set the offset of the div relative to the document.
Syntax Structure Three:
Use the function's return value to set the offset coordinates:
$(selector).offset(function(index,oldoffset))
Parameter list:
Parameter Description
function(index,oldvalue) Specifies the function that returns the new offset coordinates of the selected element:
index - optional. The index of the element.
oldvalue - optional. Current coordinates.
Example code:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
.father{
border:1px solid black;
width:400px;
height:300px;
}
.children{
height:150px;
width:200px;
background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8."></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".children").offset(function(a,b){
var newpoint= new Object();
=+50;
=+50;
return newpoint;
})
})
})
</script>
</head>
<body>
<div class="father">
<div class="children"></div>
</div>
<button>Click to set offset</button>
</body>
</html>
The above code can also set the offset of the element, but the value is returned through the function.
The above is the entire content of this article, I hope you like it.