Analysis of the difference between offset() and position() in Jquery

Analysis of the difference between offset() and position() in Jquery_jquery

WBOY

Release： 2016-05-16 16:15:30

Original

1177 people have browsed it

This article analyzes the difference between offset() and position() in Jquery through examples. Share it with everyone for your reference. The specific analysis is as follows:

1. offset() in Jquery

Get the relative offset of the matching element in the current viewport. The position is always calculated relative to the document, regardless of the position attribute of the element's parent or ancestor element.
The returned object contains two integer properties: top and left. This method only works on visible elements.

For example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { margin-left:10px; } 
</style> 
<script src="js/jquery.js"></script> 
</head> 
<body> 
 <p>Hello</p><p>2nd Paragraph</p> 
<script>
var p = $("p:last"); 
var offset = p.offset(); 
p.html( "left: " + offset.left + ", top: " + offset.top );
</script> 
</body> 
</html>

Copy after login

2. position() in Jquery

Get the offset of the matching element relative to the parent element. More generally, it is the position of the nearest parent element or ancestor element of the element containing position:relative. If no such parent or ancestor element is found, the position is calculated relative to the document (i.e., the upper left corner of the viewport). The returned object contains two integer properties: top and left. For accurate calculations, use pixel units for filler, border, and fill properties.

For example:

<!DOCTYPE html> 
<html> 
<head> 
 <style> 
 div { padding: 15px;} 
 p { margin-left:10px; } 
 </style> 
 <script src="jquery脚本URL"></script> 
</head> 
<body> 
<div> 
 <p>Hello</p> 
</div> 
<p></p> 
<script> 
var p = $("p:first"); 
var position = p.position(); 
$("p:last").text( "left: " + position.left + ", top: " + position.top ); 
</script> 
</body> 
</html>

Copy after login

3. The difference between offset() and position()

1. The offset() method obtains the relative offset of the matching element in the current window. The window here refers to the window of the current page, excluding the browser's menu bar, etc. Of course, we don't need to use jquery to control the entire browser. What we want to control is the page window.

2. The position() method obtains the offset of the matching element relative to the parent element. That is, what is obtained is the offset of the element relative to the nearest parent element with absolute positioning or relative positioning. If all parent elements are in the default static positioning mode, the processing method is the same as offset(), which is the offset of the current window.

3. When using the position() method, if all its parent elements are in the default positioning (static) mode, the processing method is the same as offset(), which is the relative offset of the current window

4. Using the offset() method, no matter how the element is positioned or its parent element is positioned, the offset of the element relative to the current viewport is obtained.

5. Under normal circumstances, if the element B to be displayed is stored under the same parent element of element A (that is, B is a sibling node of A), it is most appropriate to use position() at this time; if the element B to be displayed is Stored at the top or bottom of the DOM (that is, its parent element is the body). At this time it is best to use offset().

I hope this article will be helpful to everyone’s jQuery programming.