jQuery offset( ) 方法
Posted 乱舞春秋__
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery offset( ) 方法相关的知识，希望对你有一定的参考价值。
通过jQuery 的offset( )方法，我们可以设置或者获取被选元素相对于文档的位置。需要注意的是，当我们获取被选元素的位置时，只会返回匹配到的第一个元素的位置。当我们设置被选元素的位置时，将会设置所有匹配到的元素的位置。
注意：该方法返回的是一个包含left和top属性的对象。
（1）获取位置
语法格式：
$(selector).offset() （2）设置位置
语法格式：
常规方式
$(selector).offset({top:value,left:value})函数方式
$(selector).offset(function(n,current)) 其中，n为匹配到的元素的索引，current为元素的当前位置
示例：
1.获取位置
（1）两个DIV元素，只返回第一个匹配到的DIV的位置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jQuery/jQuery.js"></script>
<script>
$(document).ready(function(){
var position = $("div").offset();
console.log(position);
})
</script>
<style>
.one {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: rgba(38, 172, 26, 0.644);
}
.two {
position: absolute;
left: 200px;
top: 200px;
width: 100px;
height: 100px;
background-color: rgba(53, 26, 172, 0.644);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>控制台输出：
2.设置位置
（1）常规方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jQuery/jQuery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".para").offset({
left:100,
top:100
})
})
})
</script>
<style>
.para {
position: absolute;
left: 50px;
top: 50px;
background-color: rgba(38, 172, 26, 0.644);
}
</style>
</head>
<body>
<button>按钮</button>
<p class="para">我是一个段落。</p>
</body>
</html>
点击按钮，P元素的位置将会发生改变：
（2）函数方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jQuery/jQuery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").offset(function(n,current){
var newPosition = new Object();
newPosition.left = current.left + 200;
newPosition.top = current.top + 200;
return newPosition;
})
})
})
</script>
<style>
.one {
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
background-color: rgba(38, 172, 26, 0.644);
}
.two {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: rgba(53, 26, 172, 0.644);
}
</style>
</head>
<body>
<button>按钮</button>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
点击按钮，两个DIV的位置都会被改变：
以上是关于jQuery offset( ) 方法的主要内容，如果未能解决你的问题，请参考以下文章