srcmini本文概述
jQuery position()方法使你能够检索元素相对于父元素的当前位置。它返回第一个匹配元素的位置。此方法返回具有两个属性的对象：顶部和左侧位置（以像素为单位）。
jQuery position()方法不同于jQuery offset()方法, 因为position()方法检索元素相对于父元素的当前位置, 而offset()方法检索相对于文档的当前位置。
当你要在同一个包含DOM元素的另一个元素附近放置一个新元素时, position()方法更有用。
句法：
$(selector).position()jQuery position()方法的示例
让我们以一个示例来演示jQuery position()方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("p").position();
alert("Top position: " + x.top + " Left position: " + x.left);
});
});
</script>
</head>
<body>
<p>You are reading this tutorial on srcmini02.com</p>
<button>Click here to return the offset coordinates of the p element</button>
</body>
</html>立即测试
jQuery position()的另一个示例
<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var position = $(this).position();
$("#lresult").html("left position: <span>" + position.left + "</span>.");
$("#tresult").html("top position: <span>" + position.top + "</span>.");
});
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
</head>
<body>
<p>Click on any square:</p>
<span id="lresult"> </span>
<span id="tresult"> </span>
<div style="background-color:#ffd700"></div>
<div style="background-color:#030303"></div>
<div style="background-color:#473c8b"></div>
<div style="background-color:#ee82ee"></div>
</body>
</html>立即测试
评论前必须登录！
注册