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 ոճերը