outerWidth Metodu

outerWidth metodu, bir öğenin iç boşluklarını, kenarlığını ve isteğe bağlı olarak dış boşluklarını dikkate alarak genişliğini almayı ve değiştirmeyi sağlar. Önemli olan, 'hesaplanmış değer' (computed width) genişliğini alacağımızı hatırlamaktır. Kullanıcı sayfanın boyutlarını değiştirirse veya öğe ya da ebeveyni gizliyse, hesaplamada hatalar ortaya çıkabilir.

Sözdizimi

Bir öğenin genişliğini bu şekilde alabiliriz. Bu metot, dış boşlukların dikkate alınıp alınmayacağına bağlı olarak isteğe bağlı bir parametre olarak true veya false (varsayılan olarak false) alabilir. Bazı durumlarda elde edilen değerler kesirli olabilir:

$(seçici).outerWidth([margin_dahil]);

Bir öğenin genişliğini değiştirmek için - ölçü biriminin piksel olacağı şekilde sadece bir sayı (örneğin 400) veya ölçü birimini belirten bir dize (örneğin '10em') iletebilirsiniz:

$(seçici).outerWidth(yeni değer, [margin_dahil]);

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

$(seçici).outerWidth(function(kümedeki sıra, mevcut genişlik değeri));

Örnek

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

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

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);

$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);

Ayrıca Bakınız

width metodu,
bir öğenin genişliğini almayı ve değiştirmeyi sağlar
innerWidth metodu,
bir öğenin iç boşluklarını dikkate alarak genişliğini almayı ve değiştirmeyi sağlar