Metoda width

Metoda width umožňuje získávat a měnit šířku elementu. Je důležité si pamatovat, že budeme získávat 'vypočítanou hodnotu' šířky (computed width). Na rozdíl od metody css('width'), vrací bezrozměrnou veličinu (například 400) a je vhodná pro matematické výpočty. Metoda získává šířku obsahu elementu, bez ohledu na nastavení CSS vlastnosti box-sizing. Abychom předešli nepříjemnostem spojeným s tím, doporučuje se použít css('width'). Chyby ve výpočtu mohou také nastat, pokud uživatel mění velikost stránky, nebo pokud je element nebo jeho rodič skrytý. Hodnota šířky nezohledňuje hodnoty odsazení a okraje.

Syntaxe

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

$(selektor).width();

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

$(selektor).width(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).width(function(pořadí v sadě, aktuální hodnota šířky));

Příklad

Pojďme po kliknutí na div změnit jeho šířku na hodnotu 40px, pomocí metody width, a také pomocí css změnit jeho pozadí na zelenou:

<div id="test"></div>

#test {
	width: 90px; 
	height: 80px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).width(40).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

Viz také

metoda height,
která umožňuje získávat a měnit výšku elementu
metoda innerWidth,
která umožňuje získávat a měnit šířku elementu, s ohledem na jeho vnitřní odsazení
metoda outerWidth,
která umožňuje získávat a měnit šířku elementu, s ohledem na jeho odsazení a okraj
metoda css,
která umožňuje získávat a měnit CSS styly elementu