jQuery'de outerWidth ve outerHeight Metotları

Son metot çifti - outerWidth ve outerHeight, bunların yardımıyla bir öğenin tüm boşlukları ve kenarlıkları dahil genişliğini ve yüksekliğini almak mümkündür, veya dış boşlukları margin dahil etmemek mümkündür.

Bir örnek ele alalım. Bir paragrafımız olsun:

<p id="test">text</p>
<p id="out"></p>

CSS şu şekilde görünüyor:

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

#test paragrafının iç boşlukları ve kenarlıkları dahil genişlik ve yükseklik değerlerini alalım, bunun için bu metotlara false iletmek gerekir veya parantezleri boş bırakın (çünkü metotta varsayılan olarak zaten bu değer ayarlıdır):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

Şimdi değerlerimiz 4px daha farklı olacak, çünkü her taraftaki kenarlık kalınlığı 2px.

Şimdi ise #test paragrafının tüm boşlukları ve kenarlıklar dahil genişlik ve yükseklik değerlerini alalım, bunun için outerWidth ve outerHeight metotlarına true iletmek gerekir:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

Şimdi değerlerimiz bir öncekinden 20px daha farklı olacak, çünkü dış boşluklarımız her tarafta 10px.

Önceki görevlerin çözümünü tamamlayın - #wrapper div'inin altındaki üçüncü paragrafa #wrapper div'inin iç boşlukları ve kenarlıklar dahil, ancak dış boşluklar olmadan genişlik ve yükseklik değerlerini yazdırın. Dördüncü paragrafa ise #wrapper div'inin tüm boşlukları ve kenarlıklar dahil genişlik ve yükseklik değerlerini yazdırın.

Ayrıca outerWidth ve outerHeight metotlarıyla öğelerin genişlik ve yükseklik değerlerini değiştirebiliriz. Örneğin, #test1 div'inin genişliğini 250px, ve #test2 div'inin yüksekliğini 200px yapalım:

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

Bir öğenin boyutlarıyla çalışan tüm belirtilen metotlar ayrıca bir kümedeki her bir öğeye bir fonksiyon uygulama imkanı da sağlar.