Metoda innerWidth

Metoda innerWidth umožňuje získat a změnit šířku elementu včetně jeho vnitřních odsazení. Je důležité si pamatovat, že budeme získávat 'vypočítanou hodnotu' šířky (computed width). Chyby ve výpočtu mohou také nastat, pokud uživatel mění velikost stránky, a také, pokud je element nebo jeho rodič skrytý. Hodnota šířky nezohledňuje tloušťku okraje elementu.

Syntaxe

Získat šířku elementu. V některých případech získané hodnoty mohou být desetinná čísla:

$(selektor).innerWidth();

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

$(selektor).innerWidth(nová hodnota);

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

$(selektor).innerWidth(function(pořadí v sadě, aktuální hodnota šířky));

Příklad

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

Uvidíme rozdíl 10px, což je součet našich levého a pravého vnitřního odsazení.

Viz také

metoda width,
která umožňuje získat a změnit šířku elementu
metoda outerWidth,
která umožňuje získat a změnit šířku elementu, zohledňující jeho odsazení a okraj