jQuery-da pozitsiyalash

jQuery-da elementlarning koordinatalari bilan ishlash uchun position va offset usullari mavjud.

Ushbu usullar elementning joriy koordinatalarini olish yoki o'zgartirish uchun ishlatiladi va natija sifatida top va left xususiyatlarini o'z ichiga olgan ob'ektni qaytaradi.

Hisoblashdagi xatolar foydalanuvchi sahifa o'lchamlarini o'zgartirganda paydo bo'lishi mumkin. Shuningdek, usullar yashiringan elementlarning koordinatalarini ololmaydi.

offset usuli elementning pozitsiyasini hujjatga nisbatan oladi, position usuli esa elementning ota-ona chetlariga nisbatan pozitsiyasini oladi.

Keling, bizda quyidagi HTML kodi bor:

html<div id="parent">
<p id="test">matn</p>
</div>
<p id="text1"></p>
<p id="text2"></p>

Abzatslarga CSS uslublari bog'langan:

css#parent {
  width: 150px;
  border: 1px solid blueviolet;
}
#test {
  margin: 5px;
  text-align: center;
  outline: 1px solid green;
}

Keling, test divining pozitsiyasini ushbu usullar bilan olamiz va olingan ob'ektning kalitlariga murojaat qilib, ushbu ma'lumotni quyidagi abzatslarda chiqaramiz:

javascriptlet offset = $('#test').offset();
$('#text1').text(
  '(OFFSET()) left: ' + offset.left + ', top: ' + offset.top
);
let position = $('#test').position();
$('#text2').text(
  '(POSITION()) left: ' + position.left + ', top: ' + position.top
);