Metóda outerWidth

Metóda outerWidth umožňuje získať a zmeniť šírku prvku s prihliadnutím na vnútorné odsadenia, ohraničenie a výberovo - vonkajšie odsadenia prvku. Dôležité je pamätať, že budeme dostávať 'vypočítanú hodnotu' šírky (computed width). Chyby vo výpočte môžu tiež vzniknúť, ak používateľ mení rozmery stránky, alebo ak je prvok alebo jeho rodič skrytý.

Syntax

Takto môžeme získať šírku prvku. Táto metóda môže prijať voliteľný parameter v tvare true alebo false (false je predvolené), v závislosti od toho - či budú zahrnuté vonkajšie odsadenia alebo nie. V niektorých prípadoch môžu byť získané hodnoty zlomkové:

$(selektor).outerWidth([vrátane_margin]);

Na zmenu šírky prvku - môžeme odovzdať jednoducho číslo (napríklad 400), potom budú jednotky merania pixely, alebo reťazec, s uvedením jednotiek merania (napríklad '10em'):

$(selektor).outerWidth(nová hodnota, [vrátane_margin]);

Tiež môžeme aplikovať zadanú funkciu na každý prvok v súbore. Pričom prvým parametrom funkcia dostane číslo prvku v súbore, a druhým parametrom - aktuálnu hodnotu zadanej šírky pre konkrétny prvok. this vnútri funkcie bude ukazovať na aktuálny prvok. Hodnota šírky prvku sa zmení na tú, ktorú funkcia vráti:

$(selektor).outerWidth(function(číslo v súbore, aktuálna hodnota šírky));

Príklad

Pre porovnanie vypíšme informácie o šírke odseku #test, získanej metódami width, innerWidth a 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);

Pozrite si aj

metóda width,
ktorá umožňuje získať a zmeniť šírku prvku
metóda innerWidth,
ktorá umožňuje získať a zmeniť šírku prvku, s prihliadnutím na jeho vnútorné odsadenia