Metóda width

Metóda width umožňuje získať a zmeniť šírku prvku. Je dôležité pamätať, že budeme dostávať 'vypočítanú hodnotu' šírky (computed width). Na rozdiel od metódy css('width'), vracia bezrozmernú veličinu (napríklad 400) a je vhodný pre matematické výpočty. Metóda získava šírku obsahu prvku, nezávisle od zadania CSS vlastnosti box-sizing. Aby sa predišli nepríjemnostiam spojeným s týmto, odporúča sa použiť css('width'). Chyby vo výpočte môžu tiež nastať, ak používateľ mení veľkosť stránky, alebo ak je prvok alebo jeho rodič skrytý. Hodnota šírky nezahŕňa hodnoty odsadenia a okraja.

Syntax

Získať šírku prvku. V niektorých prípadoch môžu byť získané hodnoty zlomkové:

$(selektor).width();

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

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

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

$(selektor).width(function(číslo v množine, aktuálna hodnota šírky));

Príklad

Poďme pri kliknutí na div zmeniť mu šírku na hodnotu 40px, pomocou metódy width, a tiež pomocou css zmeniť jeho pozadie na zelené:

<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'
	});
});

Pozri tiež

metóda height,
ktorá umožňuje získať a zmeniť výšku prvku
metóda innerWidth,
ktorá umožňuje získať a zmeniť šírku prvku, vrátane jeho vnútorných odsadení
metóda outerWidth,
ktorá umožňuje získať a zmeniť šírku prvku, vrátane jeho odsadení a okraja
metóda css,
ktorá umožňuje získať a zmeniť CSS štýly prvku