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 стильдерін алуға және өзгертуге мүмкіндік береді