jQuery'de innerWidth ve innerHeight Metotları

innerWidth ve innerHeight metotlarıyla, yalnızca içeriği değil, aynı zamanda iç boşlukları - padding - da dikkate alarak öğelerin genişliğini ve yüksekliğini alırız.

Hadi #test paragrafının genişlik ve yükseklik değerlerini innerWidth ve innerHeight kullanarak alalım ve başka bir paragrafa yazdıralım. İki paragrafımız olsun:

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

CSS şu şekilde:

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

Javascript'te aşağıdaki kodu yazıyoruz:

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Genişlik: ' + w + ' Yükseklik: ' + h);

Gördüğünüz gibi değerler 10px kadar farklı, çünkü bizim durumumuzda her tarafta 5px olan iç boşluklar dikkate alınıyor.

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

$('#test1').innerWidth(250);
$('#test2').innerHeight(200);

İlk görevin çözümünü tamamlayın - #wrapper div'inin altındaki ikinci paragrafa, bu sefer dış boşluklar ve kenarlıklar olmadan ama iç boşluklar dahil olmak üzere #wrapper div'inin genişlik ve yükseklik değerlerini yazdırın.