jQuery position() jQueryposition()|jQuery

本文概述

jQuery position()方法的示例
jQuery position()的另一个示例

【jQuery position()】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 srcmini.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> < divstyle="background-color:#ffd700"> < /div> < divstyle="background-color:#030303"> < /div> < divstyle="background-color:#473c8b"> < /div> < divstyle="background-color:#ee82ee"> < /div> < /body> < /html>

立即测试