Metod offset

Metod offset elementning pozitsiyasini hujjatga nisbatan olish imkonini beradi, position metodidan farqli o'laroq, u ota elementning chekinishlariga nisbatan koordinatalarni oladi. Metod offset yangi elementni mavjud element ustiga joylashtirishda global manipulyatsiyalar uchun ko'proq foydali, masalan, sudrash va tushirish (drag-and-drop) amalga oshirish uchun. Metod o'z natijasida, top va left xususiyatlarini o'z ichiga olgan obyektni qaytaradi. Hisoblashdagi xatolar foydalanuvchi sahifa o'lchamini o'zgartirganda paydo bo'lishi mumkin. Shuningdek, metod yashirin elementlarning koordinatalarini olmaydi.

Sintaksis

Joriy koordinatalarni olish. Ba'zi hollarda olingan qiymatlar kasrli bo'lishi mumkin:

$(selector).offset();

Element koordinatalarini o'zgartirish uchun, top va left xususiyatlarini o'z ichiga olgan obyektni uzatish kerak:

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

Shuningdek, biz belgilangan funktsiyani to'plamdagi har bir elementga qo'llashimiz mumkin. Bunda funktsiyaning birinchi parametri to'plamdagi element raqami, ikkinchi parametri esa top va left koordinatalari bilan obyekt bo'ladi. Funktsiya ichidagi this joriy elementni ko'rsatadi. Element koordinatalari qiymatlari funktsiya qaytargan qiymatlarga o'zgaradi:

$(selector).width(function(to'plamdagi raqam, {joriy koordinatalar}));

Misol

Keling, divning (yashil kvadrat) pozitsiyasini offset metodi yordamida olaylik, so'ngra olingan obyekt kalitlariga murojaat qilib, bu ma'lumotni chiqaramiz:

<div id="result">kvadratni bosing ...</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('Chap: ' + offset.left + ', Yuqori: ' + offset.top);
});

Misol

Keling, ikkinchi abzasning koordinatalarini o'zgartiramiz:

<p style="margin-left: 10px;">matn1</p>
<p style="margin-left: 10px;">matn2</p>

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

Shuningdek qarang

metod position,
u elementning joriy koordinatalarini olish imkonini beradi
metod offsetParent,
u elementning eng yaqin pozitsiyalangan ajdodini olish imkonini beradi
metod css,
u elementning CSS uslublarini olish va o'zgartirish imkonini beradi