Sijoittaminen jQuery:ssä

Elementtien koordinaattien käsittelyyn jQuery:ssä on menetelmät position ja offset.

Nämä menetelmät palvelevat elementin nykyisten koordinaattien saamiseen tai muuttamiseen ja palauttavat tuloksena objektin, joka sisältää ominaisuudet top ja left.

Laskentavirheitä voi ilmetä, jos käyttäjä muuttaa sivun kokoa. Myös menetelmät eivät saa piilotettujen elementtien koordinaatteja.

Menetelmä offset saa elementin sijainnin asiakirjaan nähden, ja position elementin sijainnin vanhemman marginaaleihin nähden.

Oletetaan, että meillä on seuraava HTML-koodi:

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

Kappaleisiin on liitetty CSS-tyylit:

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

Otetaan divin test sijainti näillä menetelmillä, ja käsittelemällä saatujen objektien avaimia, näytetään tämä tieto alla olevissa kappaleissa:

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