Metoda innerWidth

Metoda innerWidth permite obținerea și modificarea lățimii elementului cu luarea în considerare a spațiilor sale interioare. Este important să ne amintim că vom obține 'valoarea calculată' a lățimii (computed width). Erori de calcul pot apărea, de asemenea, dacă utilizatorul modifică dimensiunile paginii, precum și dacă elementul sau părintele său sunt ascunse. Valoarea lățimii nu ia în considerare grosimea bordurii elementului.

Sintaxă

Obține lățimea elementului. În unele cazuri valorile obținute pot fi fracționale:

$(selector).innerWidth();

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

$(selector).innerWidth(valoare nouă);

De asemenea, putem aplica o funcție dată 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 elementul specific. Valoarea 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).innerWidth(function(index în set, valoarea curentă a lățimii));

Exemplu

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

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

Vom vedea o diferență de 10px, care reprezintă suma spațiilor noastre interioare din stânga și dreapta.

Vedeți și

metoda width,
care permite obținerea și modificarea lățimii elementului
metoda outerWidth,
care permite obținerea și modificarea lățimii elementului, luând în considerare spațiile și bordura acestuia