Analisis perbezaan antara offset() dan position() dalam Jquery

Analisis perbezaan antara offset() dan position() dalam Jquery_jquery

WBOY

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

asal

1173 orang telah melayarinya

Artikel ini menganalisis perbezaan antara offset() dan position() dalam Jquery melalui contoh. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

1. offset() dalam Jquery

Dapatkan offset relatif bagi elemen padanan dalam port pandangan semasa. Kedudukan sentiasa dikira secara relatif kepada dokumen, tanpa mengira atribut kedudukan unsur induk atau nenek moyang elemen.
Objek yang dikembalikan mengandungi dua sifat integer: atas dan kiri. Kaedah ini hanya berfungsi pada elemen yang boleh dilihat.

Contohnya:

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

Salin selepas log masuk

2. kedudukan() dalam Jquery

Dapatkan offset elemen padanan berbanding dengan elemen induk. Secara umumnya, ia ialah kedudukan unsur induk atau unsur nenek moyang terdekat bagi unsur yang mengandungi kedudukan:relatif. Jika tiada unsur induk atau nenek moyang seperti itu ditemui, kedudukan dikira secara relatif kepada dokumen (iaitu, sudut kiri atas port pandangan Objek yang dikembalikan mengandungi dua sifat integer: atas dan kiri. Untuk pengiraan yang tepat, gunakan unit piksel untuk sifat pengisi, sempadan dan isian.

Contohnya:

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

Salin selepas log masuk

3. Perbezaan antara offset() dan position()

1. Kaedah offset() memperoleh offset relatif bagi elemen padanan dalam tetingkap semasa. Tetingkap di sini merujuk kepada tetingkap halaman semasa, tidak termasuk bar menu penyemak imbas, dll. Sudah tentu, kita tidak perlu menggunakan jquery untuk mengawal keseluruhan pelayar Apa yang kita mahu kawal ialah tetingkap halaman.

2. Kaedah position() memperoleh offset elemen padanan berbanding dengan elemen induk. Iaitu, apa yang diperolehi ialah offset elemen relatif kepada elemen induk terdekat dengan kedudukan mutlak atau kedudukan relatif. Jika semua elemen induk berada dalam mod penentududukan statik lalai, kaedah pemprosesan adalah sama seperti offset(), iaitu offset bagi tetingkap semasa.

3. Apabila menggunakan kaedah position(), jika semua elemen induknya berada dalam mod penentududukan lalai (statik), kaedah pemprosesan adalah sama seperti offset(), iaitu offset relatif bagi tetingkap semasa

4. Menggunakan kaedah offset(), tidak kira bagaimana elemen diletakkan atau elemen induknya diposisikan, offset elemen relatif kepada viewport semasa diperolehi.

5. Dalam keadaan biasa, jika elemen B yang akan dipaparkan disimpan di bawah elemen induk yang sama bagi elemen A (iaitu, B ialah nod adik-beradik A), adalah paling sesuai untuk menggunakan position() pada ini masa; jika elemen B yang akan dipaparkan disimpan di bahagian atas atau bawah DOM (iaitu, elemen induknya ialah badan). Sebaik-baiknya gunakan offset() pada masa ini.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.