Metoda outerWidth

Metoda outerWidth permite obținerea și modificarea lățimii unui element cu luarea în considerare a padding-ului, bordurii și selectiv - a marginii elementului. Este important să reținem că vom obține 'valoarea calculată' a lățimii (computed width). Erori în calcul pot apărea, de asemenea, dacă utilizatorul schimbă dimensiunile paginii, sau dacă elementul sau părintele său sunt ascunse.

Sintaxă

Putem obține lățimea unui element astfel. Această metodă poate primi un parametru opțional sub forma true sau false (false este valoarea implicită), în funcție de faptul dacă vor fi luate în considerare marginile externe sau nu. În unele cazuri, valorile obținute pot fi fracționale:

$(selector).outerWidth([includand_margin]);

Pentru a modifica lățimea elementului - poți transmite un simplu număr (de exemplu 400), caz în care unitatea de măsură va fi pixeli, sau un șir de caractere, cu specificarea unității de măsură (de exemplu '10em'):

$(selector).outerWidth(valoare noua, [includand_margin]);

De asemenea, putem aplica o funcție definită fiecărui element din set. În acest caz, primul parametru al funcției va primi indexul elementului din set, iar al doilea parametru - valoarea curentă a lățimii setate pentru acel element specific. this în interiorul funcției va îndrepta către elementul curent. Valoarea lățimii elementului se va schimba în cea returnată de funcție:

$(selector).outerWidth(function(index în set, valoare curenta a latimii));

Exemplu

Pentru comparație, să afișăm informații despre lățimea paragrafului #test, obținută cu metodele width, innerWidth și outerWidth:

<p id="test">text</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);

Vezi și

metoda width,
care permite obținerea și modificarea lățimii unui element
metoda innerWidth,
care permite obținerea și modificarea lățimii unui element, luând în considerare padding-ul acestuia