innerWidth Metodu

innerWidth metodu, bir öğenin genişliğini iç dolguları ile birlikte almayı ve değiştirmeyi sağlar. ' Hesaplanan değer' (computed width) genişliğini aldığımızı unutmamak önemlidir. Kullanıcı sayfanın boyutlarını değiştirdiğinde veya öğe ya da üst öğesi gizli olduğunda hesaplama hataları oluşabilir. Genişlik değeri, öğenin kenarlık kalınlığını dikkate almaz.

Sözdizimi

Öğenin genişliğini almak. Bazı durumlarda alınan değerler kesirli olabilir:

$(selektör).innerWidth();

Öğenin genişliğini değiştirmek için - bir sayı (örneğin 400) iletilebilir, bu durumda ölçü birimi piksel olur, veya ölçü birimi belirtilen bir dize iletilebilir (örneğin '10em'):

$(selektör).innerWidth(yeni değer);

Ayrıca, belirtilen bir fonksiyonu kümedeki her öğeye uygulayabiliriz. Bu durumda fonksiyon ilk parametre olarak kümedeki indeks numarasını, ikinci parametre olarak da ilgili öğenin mevcut genişlik değerini alır. Fonksiyon içindeki this değeri mevcut öğeyi gösterecektir. Öğenin genişlik değeri, fonksiyonun döndürdüğü değer ile değişecektir:

$(selektör).innerWidth(function(kümedeki indeks, mevcut genişlik değeri));

Örnek

Karşılaştırma için, #test paragrafı için width ve innerWidth metotlarıyla alınan genişlik bilgisini çıktılayalım:

<p id="test">metin</p>
<p id="out1"></p>
<p id="out2"></p>

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

Sol ve sağ iç dolgularımızın toplamı olan 10px farkını göreceğiz.

Ayrıca Bakınız

metot width,
öğenin genişliğini almayı ve değiştirmeyi sağlar
metot outerWidth,
öğenin genişliğini, dolgu ve kenarlıkları ile birlikte almayı ve değiştirmeyi sağlar