Metoda outerWidth

Metoda outerWidth umožňuje získat a změnit šířku prvku s ohledem na vnitřní odsazení, okraj a selektivně - vnější odsazení prvku. Důležité je pamatovat, že získáme 'vypočítanou hodnotu' šířky (computed width). Chyby ve výpočtu mohou také nastat, pokud uživatel změní velikost stránky, nebo pokud je prvek nebo jeho rodič skrytý.

Syntaxe

Takto můžeme získat šířku prvku. Tato metoda může přijmout volitelný parametr ve formě true nebo false (false je výchozí), v závislosti na tom - zda budou zohledněny vnější odsazení nebo ne. V některých případech mohou být získané hodnoty zlomkové:

$(selektor).outerWidth([včetně_margin]);

Pro změnu šířky prvku - lze předat prostě číslo (například 400), poté jednotky měření budou pixely, nebo řetězec, s uvedením jednotek měření (například '10em'):

$(selektor).outerWidth(nová hodnota, [včetně_margin]);

Také můžeme aplikovat zadanou funkci na každý prvek v sadě. Přitom první parametr funkce obdrží číslo prvku v sadě, a druhý parametr - aktuální hodnotu zadané šířky pro konkrétní prvek. this uvnitř funkce bude ukazovat na aktuální prvek. Hodnota šířky prvku se změní na tu, kterou funkce vrátí:

$(selektor).outerWidth(function(číslo v sadě, aktuální hodnota šířky));

Příklad

Pojďme pro srovnání vypsat informace o šířce odstavce #test, získané metodami 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);

Viz také

metoda width,
která umožňuje získat a změnit šířku prvku
metoda innerWidth,
která umožňuje získat a změnit šířku prvku, s ohledem na jeho vnitřní odsazení