offset Metodu

offset metodu, position metodunun aksine, bir elementin ebeveyninin kenar boşluklarına göre koordinatlarını almak yerine belgeye göre konumunu almayı sağlar. offset metodu, özellikle sürükle ve bırak (drag-and-drop) gibi global manipülasyonlar için mevcut bir elementin üzerine yeni bir element konumlandırırken daha kullanışlıdır. Metot, top ve left özelliklerini içeren bir nesne döndürür. Kullanıcı sayfanın boyutlarını değiştirirse hesaplamalarda hatalar oluşabilir. Ayrıca metot gizli elementlerin koordinatlarını alamaz.

Sözdizimi

Mevcut koordinatları alın. Bazı durumlarda alınan değerler kesirli olabilir:

$(seçici).offset();

Bir elementin koordinatlarını değiştirmek için, top ve left özelliklerini içeren bir nesne iletmek gerekir:

$(seçici).offset({top: 40, left: 40});

Ayrıca, belirtilen bir işlevi kümedeki her elemente uygulayabiliriz. Bu durumda işlev, ilk parametre olarak kümedeki element numarasını, ikinci parametre olarak ise top ve left koordinatlarına sahip bir nesne alır. İşlev içindeki this mevcut elementi gösterir. Elementin koordinat değerleri, işlevin döndürdüğü değerlerle değişecektir:

$(seçici).width(function(kümedeki numara, {mevcut koordinatlar}));

Örnek

offset metoduyla bir div'in (yeşil kare) konumunu alalım, ardından elde edilen nesnenin anahtarlarına erişerek bu bilgiyi gösterelim:

<div id="result">kareye tıklayın ...</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);
});

Örnek

İkinci paragrafın koordinatlarını değiştirelim:

<p style="margin-left: 10px;">metin1</p>
<p style="margin-left: 10px;">metin2</p>

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

Ayrıca Bakınız

position metodu,
bir elementin mevcut koordinatlarını almayı sağlar
offsetParent metodu,
bir elementin en yakın konumlandırılmış ebeveynini almayı sağlar
css metodu,
bir elementin CSS stillerini almayı ve değiştirmeyi sağlar