Метод 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('Чап: ' + offset.left + ', Қуйи: ' + 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 стилларини олиш ва ўзгартириш имконини беради