Home > Article > Web Front-end > Analysis of the difference between offset() and position() in Jquery_jquery

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

WBOYOriginal: 2016-05-16 16:15:301120browse

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>

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Solution to memory leak problem when using jQuery to reset iframe address under IE_jqueryNext article：Solution to memory leak problem when using jQuery to reset iframe address under IE_jquery

See more

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

Related articles