Metoda innerWidth

Metoda innerWidth pozwala uzyskiwać i zmieniać szerokość elementu z uwzględnieniem jego wewnętrznych odstępów. Ważne jest, aby pamiętać, że będziemy uzyskiwać 'obliczoną wartość' szerokości (computed width). Błędy w obliczeniach mogą również występować, jeśli użytkownik zmienia rozmiary strony, a także, jeśli element lub jego rodzic są ukryte. Wartość szerokości nie uwzględnia grubości obramowania elementu.

Składnia

Uzyskaj szerokość elementu. W niektórych przypadkach uzyskane wartości mogą być ułamkowe:

$(selektor).innerWidth();

Aby zmienić szerokość elementu - można przekazać po prostu liczbę (na przykład 400), wtedy jednostki pomiaru będą piksele, albo ciąg znaków, z podaniem jednostek pomiaru (na przykład '10em'):

$(selektor).innerWidth(nowa wartość);

Możemy również zastosować zadaną funkcję do każdego elementu w zestawie. Przy tym pierwszym parametrem funkcja otrzyma numer elementu w zestawie, a drugim parametrem - bieżącą wartość zadanej szerokości dla konkretnego elementu. Wartość this wewnątrz funkcji będzie wskazywać na bieżący element. Wartość szerokości elementu zmieni się na tę, którą zwróci funkcja:

$(selektor).innerWidth(function(numer w zestawie, bieżąca wartość szerokości));

Przykład

Dla porównania wypiszmy informację o szerokości akapitu #test, uzyskanej metodami 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);

Zobaczymy różnicę wynoszącą 10px, co jest sumą naszych lewego i prawego wewnętrznych odstępów.

Zobacz też

metoda width,
która pozwala uzyskiwać i zmieniać szerokość elementu
metoda outerWidth,
która pozwala uzyskiwać i zmieniać szerokość elementu, uwzględniając jego odstępy i obramowanie