A width metódus

A width metódus lehetővé teszi egy elem szélességének lekérdezését és módosítását. Fontos megjegyezni, hogy a 'számított szélességet' kapjuk meg (computed width). A css('width') metódustól eltérően dimenzió nélküli értéket ad vissza (például 400) és kényelmes matematikai számításokhoz. A metódus az elem tartalmának szélességét kapja meg, függetlenül a CSS tulajdonság box-sizing megadásától. Az ebből eredő kellemetlenségek elkerülése érdekében ajánlott a css('width') használata. Számítási hibák akkor is előfordulhatnak, ha a felhasználó megváltoztatja az oldal méretét, vagy ha az elem vagy annak szülője rejtett. A szélesség értéke nem veszi figyelembe a margó és keret értékeit.

Szintaxis

Elem szélességének lekérdezése. Egyes esetekben a kapott értékek tört számok lehetnek:

$(selector).width();

Az elem szélességének módosításához - egyszerűen átadhatunk egy számot (például 400), ekkor a mértékegység pixel lesz, vagy egy karakterláncot, a mértékegység megadásával (például '10em'):

$(selector).width(új érték);

Egy megadott függvényt is alkalmazhatunk minden elemre a halmazban. Ekkor a függvény első paramétere az elem sorszáma a halmazban, a második paraméter pedig az adott elem aktuális szélességértéke. A this értéke a függvényen belül az aktuális elemre fog mutatni. Az elem szélességének értéke azon értékre változik, amelyet a függvény visszaad:

$(selector).width(function(sorszám a halmazban, aktuális szélességérték));

Példa

Változtessük meg a div szélességét 40px értékre kattintáskor, a width metódus használatával, valamint a css segítségével változtassuk meg a háttérszínét zöldre:

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

Lásd még

a height metódus,
amely lehetővé teszi egy elem magasságának lekérdezését és módosítását
a innerWidth metódus,
amely lehetővé teszi egy elem szélességének lekérdezését és módosítását, figyelembe véve a belső margóit
a outerWidth metódus,
amely lehetővé teszi egy elem szélességének lekérdezését és módosítását, figyelembe véve a margóit és keretét
a css metódus,
amely lehetővé teszi egy elem CSS stílusainak lekérdezését és módosítását