Metody outerWidth i outerHeight w jQuery

Ostatnia para metod - outerWidth i outerHeight, za pomocą których można uzyskać szerokość i wysokość elementu uwzględniając wszystkie marginesy i obramowania, albo można nie uwzględniać zewnętrznych marginesów margin.

Rozważmy przykład. Niech mamy akapit:

html<p id="test">text</p>
<p id="out"></p>

CSS wygląda tak:

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

Pobierzmy wartości szerokości i wysokości akapitu #test, uwzględniając wewnętrzne marginesy i obramowania, w tym celu do tych metod należy przekazać false lub pozostawić nawiasy puste (ponieważ jest to ustawione domyślnie w metodzie):

javascriptlet w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

Teraz nasze wartości będą różnić się jeszcze o 4px, ponieważ grubość obramowania wynosi 2px z każdej strony.

A teraz pobierzmy wartości szerokości i wysokości akapitu #test, uwzględniając wszystkie marginesy i obramowania, w tym celu do metod outerWidth i outerHeight należy przekazać true:

javascriptlet w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

Teraz nasze wartości będą różnić się od poprzednich jeszcze o 20px, ponieważ zewnętrzne marginesy wynoszą po 10px z każdej strony.

Również za pomocą metod outerWidth i outerHeight możemy zmienić wartości szerokości i wysokości elementów. Na przykład, ustawmy szerokość diva #test1 na 250px, a wysokość #test2 - na 200px:

javascript$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

Wszystkie wymienione metody pracy z rozmiarami elementu również przewidują możliwość zastosowania funkcji do każdego elementu w zbiorze.