Metoda outerWidth

Metoda outerWidth pozwala pobierać i zmieniać szerokość elementu z uwzględnieniem wewnętrznych wcięć, obramowania i selektywnie - zewnętrznych wcięć elementu. Ważne jest pamiętać, że będziemy otrzymywać '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.

Składnia

W ten sposób możemy otrzymać szerokość elementu. Ta metoda może przyjmować opcjonalny parametr w postaci true lub false (false jest domyślnie), w zależności od tego - czy będą uwzględniane zewnętrzne wcięcia czy nie. W niektórych przypadkach otrzymane wartości mogą być ułamkowe:

javascript$(selektor).outerWidth([włączając_margin]);

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'):

javascript$(selektor).outerWidth(nowa wartość, [włączając_margin]);

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 - aktualną wartość zadanej szerokości dla konkretnego elementu. this wewnątrz funkcji będzie wskazywać na aktualny element. Wartość szerokości elementu zmieni się na tę, którą zwróci funkcja:

javascript$(selektor).outerWidth(function(numer w zestawie, aktualna wartość szerokości));

Przykład

Dla porównania wypiszmy informację o szerokości akapitu #test, otrzymanej metodami width, innerWidth i outerWidth:

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

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

javascriptlet 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);

Zobacz też