პოზიციონირება 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;
}

მოდით მივიღოთ div 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
);