offset методу

offset методу position методунан айырмаланып, элементтин документке салыштырмалуу позициясын алууга мүмкүндүк берет, ал эми 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 стилдерин алууга жана өзгөртүүгө мүмкүндүк берген