您的位置：首页 > Web前端 > JQuery

jQuery使用中的一些注意事项（一）

2016-10-20 15:26 477 查看

首先，相对于盒模型来说，大家应该都很熟悉，jQuery中也有一些计算偏移量的，比如.position()和.offset()。

先看一下官网对这两个的定义：

.position()：获取匹配元素相对父元素的偏移。

返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

.offset()：获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

但是在实际应用中并不是这样的，下面给段代码，可以拷在本地，运行查看，接下来将以这段代码为例进行分析。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>.position()与.offset()</title>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.nob1 {
margin: 100px 0 0 100px;
padding: 100px 0 0 100px;
width: 200px;
height: 200px;
background: #ccc;
border: 1px solid #000;
}
.nob2 {
width: 100px;
height: 100px;
background: #f00;
border: 1px solid #00f;
}
.nob3 {
margin: 10px 0 0 10px;
width: 50px;
height: 50px;
background: #0f0;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="nob1">
nob1
<div class="nob2">
nob2
<div class="nob3">nob3</div>
</div>
</div>
<script type="text/javascript">
var position = $(".nob2").position();
var offset = $(".nob2").offset();
console.log("position-top:" + position.top + ",position-left:" + position.left);
console.log("offset-top:" + offset.top + ",offset-left:" + offset.left);
var position1 = $(".nob3").position();
var offset1 = $(".nob3").offset();
console.log("position1-top:" + position1.top + ",position1-left:" + position1.left);
console.log("offset1-top:" + offset1.top + ",offset1-left:" + offset1.left);
</script>
</body>
</html>

运行结果为

如果为body设置position: relative;

则运行结果为：

在此处再上传一张盒模型，方便描述

接下来讨论的前提都在这段代码的情况下，由结果的第一行和第二行可以看出，.position()和.offset()的结果竟然一样，可以明显看出.position()并不是相对于父元素的偏移量，而是和.offset()一样是在当前视口的相对偏移，但是第三行和第四行两者又明显的不一样。这是因为.position()是向上寻找父元素的position为relative/absolute/fixed的偏移量，并且计算的极限是margin，也就是在计算的时候他会把本元素的margin区域也算作为本元素，这个很特殊；而.offset()的计算极限是border，计算的时候会把border以内的内容算为本元素，这和一般是一样的。所以在使用的时候如果所要获取的元素的所有向上父元素中没有position为relative/absolute/fixed的并且没有margin的情况下，这两者的计算结果是一样的；但是若是所要获取的元素的所有向上父元素中没有position为relative/absolute/fixed的并且拥有margin属性，则两者差值为margin的值。

总之，.position()是相对于他的父元素的父元素的父元素的第一个position为relative/absolute/fixed的偏移量，并且计算的时候会将本元素的margin算作本元素，.offset()是在当前视口的相对偏移，并且计算的时候是以本元素的border为界限。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航