在 jQuery 中,很多时候我们需要获取元素的位置,再进行相应的操作。例如在 城东书院的在线调色板工具中,就是根据元素的位置来确定颜色值的,如图 1 所示。
如何获取元素的位置?jQuery 为我们提供了两种方法:一种是 offset(),另一种是 position()。
在 jQuery 中,我们可以使用 offset() 方法来获取或设置元素相对于“当前文档(也就是浏览器窗口)”的偏移距离。
语法:
offset() 方法返回的是一个坐标对象,该对象有两个属性,这两个属性返回的都是一个不带单位的数字:
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{text-align:center;}
#box1,#box2
{
display:inline-block;
height:100px;
width:100px;
}
#box1{background-color:Red;}
#box2{background-color:Orange;}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
var top = $("#box2").offset().top;
var left = $("#box2").offset().left;
var result = "box2距离顶部:" + top + "px\n" + "box2距离左部:" + left + "px";
console.log(result);
})
</script>
</head>
<body>
<div id="box1"></div><br />
<div id="box2"></div><br />
</body>
</html>
控制台输出结果如图 1 所示。
特别注意一下,$().offset().top 和 $().offset().left 这两个方法返回的数值是不带单位的。
在 jQuery 中,我们可以使用 position() 方法来获取或设置当前元素相对于“最近被定位的祖先元素”的偏移位置。
语法:
position() 方法返回的是一个坐标对象,该对象有两个属性,这两个属性返回的都是一个不带单位的数字:
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#father
{
position:relative;
width:200px;
height:200px;
background-color:orange;
}
#son
{
position:absolute;
top:20px;
left:50px;
width:50px;
height:50px;
background-color:red;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
var top = $("#son").position().top;
var left = $("#son").position().left;
var result = "子元素相对父元素顶部的距离是:" + top + "px\n" + "子元素相对父元素左部的距离是:" + left + "px";
console.log(result);
})
</script>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
控制台输出结果如图 2 所示。
在实际开发中,获取元素的坐标是很常见的操作。大家一定要重点掌握 offset() 和 position() 这两个方法。