Методи offset

Методи offset имкон медиҳад, ки позицияи элемент нисбат ба ҳуҷҷат гирифта шавад, ба фарқ аз методи position, ки координатҳоро нисбат ба оташтиҳои элементҳои волидайн мегирад. Методи offset бештар фоидаовар аст, вақте ки элементи навро болои элементи мавҷуда ҷойгир кунед барои табдилдиҳиҳои умумӣ, масалан, барои амалӣ кардани кашидан (drag-and-drop). Метод ҳамчун натиҷа объект бармегардонад, ки хосиятҳои top ва left-ро дар бар мегирад. Хатоҳо дар ҳисобкуниҳо метавонанд пайдо шаванд, агар корбар андозаҳои саҳифаро тағйир диҳад. Инчунин метод координатҳои элементҳои пинҳоншударо намегирад.

Синтаксис

Гирифтани координатҳои ҷорӣ. Дар баъзе ҳолатҳо қиматҳои гирифташуда метавонанд касрӣ бошанд:

$(selector).offset();

Барои тағйир додани координатҳои элемент, бояд объектеро фиристод, ки хосиятҳои top ва left-ро дар бар гирад:

$(selector).offset({top: 40, left: 40});

Инчунин мо метавонем функсияи муайянкардашударо ба ҳар як элемент дар маҷмӯъ татбиқ кунем. Дар ин ҳолат функсия якумин параметр рақами элементро дар маҷмӯъ мегирад, ва параметри дуюм объект бо координатҳои top ва left мебошад. this дар дохили функсия ба элементи ҷорӣ ишора мекунад. Қиматҳои координатии элемент ба онҳое тағйир меёбанд, ки функсия бармегардонад:

$(selector).offset(function(index, currentOffset));

Намуна

Биёед позицияи дивро (чоркунҷаи сабз), бо ёрии методи offset гирем, ва сипас, бо муроҷиат ба калидҳои объекти гирифташуда, ин маълумотро баронем:

<div id="result">click a square ...</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;">matn1</p>
<p style="margin-left: 10px;">matn2</p>

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

Нигаред низ

методи position,
ки имкон медиҳад, ки координатҳои ҷорӣ элемент гирифта шавад
методи offsetParent,
ки имкон медиҳад, ки наздиктарин элементи волидайни ҷойгиркардашуда гирифта шавад
методи css,
ки имкон медиҳад, ки услубҳои CSS-и элемент гирифта ва тағйир дода шаванд