Դիրքավորումը 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
);