jquery offset() method


  Translation results:

offset

UK[ˈɒfset] US[ˈɔ:fset]

vt. Offset; compensate; (for the purpose of comparison) to juxtapose (or Juxtapose); install a branch for (pipeline, etc.)

vi. form a branch, grow a branch; install a branch

n. start; set off; lithography; offset, compensate

adj. Branch; off-centre; offset; beginning

jquery offset() methodsyntax

Function: The offset() method returns or sets the offset (position) of the matching element relative to the document.

Return offset coordinates: Return the offset coordinates of the first matching element. The object returned by this method contains two integer properties: top and left, measured in pixels. This method only works on visible elements.

Syntax: $(selector).offset()

Set offset coordinates: Set the offset coordinates of all matching elements .

Syntax: $(selector).offset(value)

Parameters:

ParameterDescription
value Required. Specifies the top and left coordinates in pixels. Possible value: value pairs, such as {top:100,left:0}Object with top and left attributes

Use the function to set the offset coordinates: Use a function to set the offset coordinates of all matching elements.

Syntax: $(selector).offset(function(index,oldoffset))

Parameters:

ParametersDescription
function(index,oldoffset)Specifies to return the new offset of the selected element function of coordinates.
index Optional. Accepts the index position of the selector
oldvalue Optional. Accepts the current coordinates of the selector.

jquery offset() methodexample

<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("p").offset();
    $("#span1").text(x.left);
    $("#span2").text(x.top);
  });
});
</script>
</head>
<body>
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>获得 offset</button>
</body>
</html>
Run instance »

Click the "Run instance" button to view the online instance

Home

Videos

Q&A