Kaedah offset

Kaedah offset membolehkan anda mendapatkan kedudukan elemen relatif kepada dokumen, berbeza dengan kaedah position, yang mendapatkan koordinat relatif kepada indent induk. Kaedah offset lebih berguna untuk memposisikan elemen baru di atas elemen sedia ada untuk manipulasi global, contohnya, untuk melaksanakan seret dan lepas (drag-and-drop). Hasilnya, kaedah mengembalikan objek yang mengandungi sifat top dan left. Ralat dalam pengiraan mungkin berlaku jika pengguna menukar saiz halaman. Juga, kaedah tidak mendapatkan koordinat elemen tersembunyi.

Sintaks

Dapatkan koordinat semasa. Dalam beberapa kes nilai yang diperoleh mungkin pecahan:

$(pemilih).offset();

Untuk menukar koordinat elemen, anda perlu menghantar objek yang mengandungi sifat top dan left:

$(pemilih).offset({top: 40, left: 40});

Kita juga boleh menggunakan fungsi yang ditentukan untuk setiap elemen dalam set. Dalam kes ini, fungsi akan menerima nombor elemen dalam set sebagai parameter pertama, dan parameter kedua - objek dengan koordinat top dan left. this di dalam fungsi akan menunjuk kepada elemen semasa. Nilai koordinat elemen akan berubah kepada nilai yang dikembalikan oleh fungsi:

$(pemilih).width(function(nombor dalam set, {koordinat semasa}));

Contoh

Mari dapatkan kedudukan div (segi empat sama hijau), menggunakan kaedah offset, dan kemudian, dengan merujuk kepada kunci objek yang diperoleh, paparkan maklumat ini:

<div id="result">klik segi empat ...</div>
<div id="test"></div>

#test {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 100px;
	height: 100px;
	background: green;
	color: white;
	margin-top: 10px;
	cursor: pointer;
}

$('*', document.body).click(function(event) {
	let offset = $(this).offset();
	
	event.stopPropagation();
	$('#result').text('Left: ' + offset.left + ', Top: ' + offset.top);
});

Contoh

Mari tukar koordinat perenggan kedua:

<p style="margin-left: 10px;">teks1</p>
<p style="margin-left: 10px;">teks2</p>

$('p').last().offset({top: 40, left: 60});

Lihat juga

kaedah position,
yang membolehkan anda mendapatkan semasa koordinat elemen
kaedah offsetParent,
yang membolehkan anda mendapatkan nenek moyang terdekat yang diposisikan bagi elemen
kaedah css,
yang membolehkan anda mendapatkan dan menukar gaya CSS elemen