Jquery中offset()和position()的區別分析

首頁

web前端

js教程

Jquery中offset()和position()的區別分析_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:15 PM

jquery offset position 差別

本文實例分析了Jquery中offset()和position()的差異。分享給大家供大家參考。具體分析如下：

一、Jquery中offset()

取得匹配元素在目前視口的相對偏移。總是計算相對於文件的位置，無論元素的父元素或祖先元素的position屬性是什麼。
傳回的物件包含兩個整形屬性：top 和 left。此方法只對可見元素有效。

例如：

<!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>

登入後複製

二、Jquery中position()

取得匹配元素相對父元素的偏移。更通俗一點，含有position:relative的元素的最近的父元素或祖先元素---的位置。如果未能找到這樣的父元素或祖先元素，那麼會計算相對於文檔（即視區左上角）的位置. 返回的物件包含兩個整形屬性：top 和 left。若要精確計算結果，請在補白、邊框和填滿屬性上使用像素單位。

例如：

<!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>

登入後複製

三、offset()和position()的區別

1、offset()方法取得符合元素在目前視窗的相對偏移量。這裡的視窗指的是目前頁面的窗口，不包括瀏覽器的選單列等，當然我們也不太需要使用jquery來控制整個瀏覽器，我們所要控制的是頁面視窗。

2、position()方法取得匹配元素相對父元素的偏移量。即獲取的是該元素相對於最近的一個擁有絕對定位或相對定位的父元素的偏移量。如果所有的父元素都是預設的static定位方式，則其處理方式和offset()一樣，是目前視窗的偏移量。

3、使用position()方法時如果其所有的父元素都為預設定位（static）方式，則其處理方式和offset()一樣，是當前視窗的相對偏移

4、使用offset()方法不管該元素如何定位，也不管其父元素如何定位，都是獲取的該元素相對於當前視口的偏移。

5、一般情況下，如果要顯示的元素B存放在元素A的同一父元素下（即B為A的兄弟節點），這個時候使用position() 是最合適的；如果顯示的元素B存放在DOM的最頂端或最底端（即其父元素就是body）。這時候用offset()是最好的。

希望本文所述對大家的jQuery程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1676

CakePHP 教程

1429

Laravel 教程

1333

PHP教程

1278

C# 教程

1257

Related knowledge

PS導出PDF如何設置密碼保護 Apr 06, 2025 pm 04:45 PM

在 Photoshop 中導出帶密碼保護的 PDF：打開圖像文件。點擊“文件”>“導出”>“導出為 PDF”。設置“安全性”選項，兩次輸入相同的密碼。點擊“導出”生成 PDF 文件。

centos和ubuntu的區別 Apr 14, 2025 pm 09:09 PM

CentOS 和 Ubuntu 的關鍵差異在於：起源（CentOS 源自 Red Hat，面向企業；Ubuntu 源自 Debian，面向個人）、包管理（CentOS 使用 yum，注重穩定；Ubuntu 使用 apt，更新頻率高）、支持週期（CentOS 提供 10 年支持，Ubuntu 提供 5 年 LTS 支持）、社區支持（CentOS 側重穩定，Ubuntu 提供廣泛教程和文檔）、用途（CentOS 偏向服務器，Ubuntu 適用於服務器和桌面），其他差異包括安裝精簡度（CentOS 精

H5和小程序與APP的區別 Apr 06, 2025 am 10:42 AM

H5、小程序和APP的主要區別在於：技術架構：H5基於網頁技術，小程序和APP為獨立應用程序。體驗和功能：H5輕便易用，功能受限；小程序輕量級，交互性好；APP功能強大，體驗流暢。兼容性：H5跨平台兼容，小程序和APP受平台限制。開發成本：H5開發成本低，小程序中等，APP最高。適用場景：H5適合信息展示，小程序適合輕量化應用，APP適合複雜功能應用。

在router文件夾下的index.js文件中為什麼需要調用Vue.use(VueRouter)？ Apr 05, 2025 pm 01:03 PM

在router文件夾下的index.js文件中註冊VueRouter的必要性在開發Vue應用程序時，常常會遇到關於路由配置的問題。特�...

JavaScript中如何從指定DOM節點下使用XPath進行查找？ Apr 04, 2025 pm 11:15 PM

DOM節點下XPath查找方法詳解在JavaScript中，我們經常需要根據XPath表達式從DOM樹中查找特定的節點。如果需要從某�...

laravel和thinkphp的區別 Apr 18, 2025 pm 01:09 PM

Laravel 和 ThinkPHP 都是流行的 PHP 框架，在開發中各有優缺點。本文將深入比較這兩者，重點介紹它們的架構、特性和性能差異，以幫助開發者根據其特定項目需求做出明智的選擇。

不同數據庫系統添加列的語法有什麼區別 Apr 09, 2025 pm 02:15 PM

不同數據庫系統添加列的語法為：mysql：alter table table_name add column_name data_type; postgresql：alter table table_name添加column_name data_type; oracle; oracle：alter table table_name add（column_name data_type）

centos如何查看防火牆狀態 Apr 14, 2025 pm 08:18 PM

CentOS防火牆的狀態可以通過sudo firewall-cmd --state命令查看，返回running或not running。更詳細的信息可以使用sudo firewall-cmd --list-all查看，包括已配置的區域、服務、端口等。如果 firewall-cmd 無法解決問題，可以使用sudo iptables -L -n查看iptables規則。修改防火牆配置前請務必做好備份，以確保服務器安全性。

See all articles

Jquery中offset()和position()的區別分析_jquery

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題