Posisionering in jQuery

Vir die werk met koördinate van elemente in jQuery is daar metodes position en offset.

Hierdie metodes dien om die huidige koördinate van 'n element te verkry of te verander en gee as resultaat 'n objek terug wat die eienskappe top en left bevat.

Foute in berekeninge kan voorkom as die gebruiker die grootte van die bladsy verander. Die metodes verkry ook nie die koördinate van versteekte elemente nie.

Die metode offset verkry die posisie van 'n element relatief tot die dokument, en position die posisie van die element relatief tot die spasieëring van die ouer.

Kom ons sê ons het die volgende HTML-kode:

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

CSS-style is aan die paragrawe gekoppel:

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

Kom ons kry die posisie van die div test met hierdie metodes, en deur na die sleutels van die verkregte objek te verwys, wys hierdie inligting hieronder in die paragrawe:

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