jQuery да позиционирование

jQuery да элементларнинг координаталари билан ишлаш учун position ва offset усуллари мавжуд.

Бу усуллар элементнинг жорий координаталарини олиш ёки ўзгартириш учун хизмат қилади ва натижа сифатида top ва left хоссаларини ўз ичига олган объектни қайтаради.

Ҳисоблашдаги хатолар фойдаланувчи саҳифа ўлчамларини ўзгартирганда юз бериши мумкин. Шунингдек, усуллар яширин элементларнинг координаталарини олмайди.

offset усули элементнинг ҳужжатга нисбатан позициясини олса, position усули эса элементнинг ота-онага нисбатан позициясини олади.

Бизда куйидаги HTML коди бор деб фараз қилайлик:

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

Абзацларга CSS стиллари бириктирилган:

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

Келинг, test дивининг позициясини бу усуллар билан олайлик ва олинган объектнинг калитларига мурожаат қилиб, бу маълумотни қуйидаги абзацларда чиқарайлик:

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
);