Web Front-end
JS Tutorial
Analysis of the difference between offset() and position() in Jquery_jquery
Analysis of the difference between offset() and position() in Jquery_jquery
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.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What are the basic requirements for c language functions
Apr 03, 2025 pm 10:06 PM
C language functions are the basis for code modularization and program building. They consist of declarations (function headers) and definitions (function bodies). C language uses values to pass parameters by default, but external variables can also be modified using address pass. Functions can have or have no return value, and the return value type must be consistent with the declaration. Function naming should be clear and easy to understand, using camel or underscore nomenclature. Follow the single responsibility principle and keep the function simplicity to improve maintainability and readability.
How to set password protection for export PDF on PS
Apr 06, 2025 pm 04:45 PM
Export password-protected PDF in Photoshop: Open the image file. Click "File"> "Export"> "Export as PDF". Set the "Security" option and enter the same password twice. Click "Export" to generate a PDF file.
Concept of c language function
Apr 03, 2025 pm 10:09 PM
C language functions are reusable code blocks. They receive input, perform operations, and return results, which modularly improves reusability and reduces complexity. The internal mechanism of the function includes parameter passing, function execution, and return values. The entire process involves optimization such as function inline. A good function is written following the principle of single responsibility, small number of parameters, naming specifications, and error handling. Pointers combined with functions can achieve more powerful functions, such as modifying external variable values. Function pointers pass functions as parameters or store addresses, and are used to implement dynamic calls to functions. Understanding function features and techniques is the key to writing efficient, maintainable, and easy to understand C programs.
The difference between H5 and mini-programs and APPs
Apr 06, 2025 am 10:42 AM
H5. The main difference between mini programs and APP is: technical architecture: H5 is based on web technology, and mini programs and APP are independent applications. Experience and functions: H5 is light and easy to use, with limited functions; mini programs are lightweight and have good interactiveness; APPs are powerful and have smooth experience. Compatibility: H5 is cross-platform compatible, applets and APPs are restricted by the platform. Development cost: H5 has low development cost, medium mini programs, and highest APP. Applicable scenarios: H5 is suitable for information display, applets are suitable for lightweight applications, and APPs are suitable for complex functions.
Why do you need to call Vue.use(VueRouter) in the index.js file under the router folder?
Apr 05, 2025 pm 01:03 PM
The necessity of registering VueRouter in the index.js file under the router folder When developing Vue applications, you often encounter problems with routing configuration. Special...
What are the differences and connections between c and c#?
Apr 03, 2025 pm 10:36 PM
Although C and C# have similarities, they are completely different: C is a process-oriented, manual memory management, and platform-dependent language used for system programming; C# is an object-oriented, garbage collection, and platform-independent language used for desktop, web application and game development.
How to use XPath to search from a specified DOM node in JavaScript?
Apr 04, 2025 pm 11:15 PM
Detailed explanation of XPath search method under DOM nodes In JavaScript, we often need to find specific nodes from the DOM tree based on XPath expressions. If you need to...
What are the different ways of promoting H5 and mini programs?
Apr 06, 2025 am 11:03 AM
There are differences in the promotion methods of H5 and mini programs: platform dependence: H5 depends on the browser, and mini programs rely on specific platforms (such as WeChat). User experience: The H5 experience is poor, and the mini program provides a smooth experience similar to native applications. Communication method: H5 is spread through links, and mini programs are shared or searched through the platform. H5 promotion methods: social sharing, email marketing, QR code, SEO, paid advertising. Mini program promotion methods: platform promotion, social sharing, offline promotion, ASO, cooperation with other platforms.
