Metode offset

Metode offset memungkinkan untuk mendapatkan posisi elemen relatif terhadap dokumen, berbeda dengan metode position, yang mendapatkan koordinat relatif terhadap induk yang diposisikan. Metode offset lebih berguna saat memposisikan elemen baru di atas elemen yang ada untuk manipulasi global, misalnya, untuk mengimplementasikan drag-and-drop. Sebagai hasilnya, metode mengembalikan objek yang berisi properti top dan left. Kesalahan dalam perhitungan dapat terjadi jika pengguna mengubah ukuran halaman. Juga metode tidak mendapatkan koordinat elemen yang disembunyikan.

Sintaks

Mendapatkan koordinat saat ini. Dalam beberapa kasus nilai yang diperoleh mungkin berupa pecahan:

$(selektor).offset();

Untuk mengubah koordinat elemen, perlu melewatkan objek yang berisi properti top dan left:

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

Kita juga dapat menerapkan fungsi yang ditentukan ke setiap elemen dalam kumpulan. Dalam hal ini, fungsi akan menerima parameter pertama sebagai nomor elemen dalam kumpulan, dan parameter kedua - objek dengan koordinat top dan left. this di dalam fungsi akan menunjuk ke elemen saat ini. Nilai koordinat elemen akan berubah menjadi nilai yang dikembalikan oleh fungsi:

$(selektor).width(function(nomor dalam kumpulan, {koordinat saat ini}));

Contoh

Mari kita dapatkan posisi div (kotak hijau), menggunakan metode offset, kemudian, dengan mengakses kunci dari objek yang diperoleh, tampilkan informasi ini:

<div id="result">klik kotak ...</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 kita ubah koordinat paragraf kedua:

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

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

Lihat juga

metode position,
yang memungkinkan untuk mendapatkan koordinat saat ini dari elemen
metode offsetParent,
yang memungkinkan untuk mendapatkan induk terdekat yang diposisikan dari elemen
metode css,
yang memungkinkan untuk mendapatkan dan mengubah gaya CSS elemen