offset მეთოდი

offset მეთოდი საშუალებას აძლევს მიიღოთ ელემენტის პოზიცია დოკუმენტთან მიმართებაში, განსხვავებით position მეთოდისგან, რომელიც ღებულობს კოორდინატებს მშობელთან მიმართებაში. offset მეთოდი უფრო გამოსადეგია ახალი ელემენტის პოზიციონირებისთვის არსებულ ელემენტზე გლობალური მანიპულაციებისთვის, მაგალითად, გადათრევის (drag-and-drop) რეალიზაციისთვის. მეთოდი თავისი შედეგის სახით აბრუნებს ობიექტს, რომელიც შეიცავს top და left თვისებებს. გამოთვლებში შეცდომები შეიძლება წარმოიშვას, თუ მომხმარებელი ცვლის გვერდის ზომებს. ასევე მეთოდი არ ღებულობს დამალული ელემენტების კოორდინატებს.

სინტაქსი

მიმდინარე კოორდინატების მიღება. ზოგიერთ შემთხვევაში მიღებული მნიშვნელობები შეიძლება იყოს წილადი:

$(სელექტორი).offset();

ელემენტის კოორდინატების შესაცვლელად, საჭიროა გადავცეთ ობიექტი, რომელიც შეიცავს top და left თვისებებს:

$(სელექტორი).offset({top: 40, left: 40});

ასევე ჩვენ შეგვიძლია გამოვიყენოთ მითითებული ფუნქცია ყოველ ელემენტზე კომპლექტში. ამ შემთხვევაში პირველი პარამეტრის სახით ფუნქცია მიიღებს ელემენტის ნომერს კომპლექტში, ხოლო მეორე პარამეტრის სახით - ობიექტს top და left კოორდინატებით. this ფუნქციის შიგნით მიუთითებს მიმდინარე ელემენტზე. ელემენტის კოორდინატების მნიშვნელობები შეიცვლება იმაზე, რასაც ფუნქცია დააბრუნებს:

$(სელექტორი).width(function(ნომერი კომპლექტში, {მიმდინარე კოორდინატები}));

მაგალითი

მოდით მივიღოთ დივის (მწვანე კვადრატის) პოზიცია, offset მეთოდის საშუალებით, შემდეგ კი, მიღებულ ობიექტთან მისაწვდომად, გამოვიტანოთ ეს ინფორმაცია:

<div id="result">დააწკაპუნეთ კვადრატს ...</div>
<div id="test"></div>

#test {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 100px;
	height: 100px;
	background: green;
	color: white;
	margin-top: 10px;
	cursor: pointer;
}

$('*', document.body).click(function(event) {
	let offset = $(this).offset();
	
	event.stopPropagation();
	$('#result').text('Left: ' + offset.left + ', Top: ' + offset.top);
});

მაგალითი

მოდით შევცვალოთ მეორე აბზაცის კოორდინატები:

<p style="margin-left: 10px;">ტექსტი1</p>
<p style="margin-left: 10px;">ტექსტი2</p>

$('p').last().offset({top: 40, left: 60});

იხილეთ ასევე

position მეთოდი,
რომელიც საშუალებას აძლევს მიიღოთ ელემენტის მიმდინარე კოორდინატები
offsetParent მეთოდი,
რომელიც საშუალებას აძლევს მიიღოთ ელემენტის უახლოესი პოზიციონირებული წინაპარი
css მეთოდი,
რომელიც საშუალებას აძლევს მიიღოთ და შეცვალოთ ელემენტის CSS სტილები