A brief discussion on jQuery's offset() method and example sharing

A brief discussion on jQuery's offset() method and example sharing_jquery

WBOY

Release： 2016-05-16 15:49:57

Original

945 people have browsed it

Definition and usage of offset() method:

This method returns or sets the offset of the matched element relative to the document object.

Grammar Structure 1:

$(selector).offset()
Get the relative offset of the matching element in the current document.
The returned object contains two integer properties: top and left.
This method only works on 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.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
   a=$(".children").offset();
   alert("元素的偏移量坐标是："+a.top+"|"+a.left+"");
  })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>获取元素的坐标</button>
</body>
</html>

Copy after login

The above code can pop up the offset of the sub-div relative to the document.

Grammar structure 2:

$(selector).offset(value)

Set 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 implement relocation.
Parameter list:

Parameter Description
value specifies the top and left coordinates in pixels.

Possible values:

1. Value pair, 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.3.js"></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>点击设置偏移量</button>
</body>
</html>

Copy after login

The above code can set the offset of the div relative to the document.

Grammar structure three:

Use the return value of the function to set the offset coordinates:

$(selector).offset(function(index,oldoffset))
Parameter list:

Parameter Description
function(index,oldvalue) specifies a 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.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
  $(".children").offset(function(a,b){
   var newpoint= new Object();
   newpoint.top=b.top+50;
   newpoint.left=b.left+50;
   return newpoint;
  })
 })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>点击设置偏移量</button>
</body>
</html>

Copy after login

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 all like it.