jQuery offset() jQueryoffset()|jQuery

本文概述

jQuery offset方法的参数
jQuery offset()方法的示例
jQuery offset()示例2

jQuery offset()方法用于获取第一个匹配元素的当前偏移量。
它提供了两种方法：设置或返回所选元素相对于文档的偏移坐标。

返回偏移量：使用此方法返回偏移量时, 它将返回FIRST匹配元素的偏移量坐标。它指定对象的两个属性：像素的顶部和左侧位置。
设置偏移量：使用此方法设置偏移量时, 它将设置所有匹配元素的偏移量坐标。

句法：
要返回偏移坐标：

$(selector).offset()

设置偏移坐标：

$(selector).offset({top:value, left:value})

要使用函数设置偏移坐标：

$(selector).offset(function(index, currentoffset))

jQuery offset方法的参数

参数	描述
{top：value, left：value}	设置偏移量时, 它是必填参数。它以像素为单位指定顶部和左侧坐标。
函数（索引, 当前偏移）：	它是一个可选参数。它指定一个函数, 该函数返回包含顶部和左侧坐标的对象。索引：它返回元素在集合中的索引位置。 Currentoffset：返回所选元素的当前坐标。

jQuery offset()方法的示例让我们以一个示例来演示jQuery offset()方法。

< !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").offset(); alert("Top: " + x.top + " Left: " + 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 offset()示例2

< !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 offset = $(this).offset(); $("#lresult").html("left offset: < span> " + offset.left + "< /span> ."); $("#tresult").html("top offset: < span> " + offset.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:#7fffd4"> < /div> < divstyle="background-color:#a52a2a"> < /div> < divstyle="background-color:#7fff00"> < /div> < divstyle="background-color:#ff1493"> < /div> < /body> < /html>

【jQuery offset()】立即测试