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:

javascript$(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'):

javascript$(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:

javascript$(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:

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

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

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

Lásd még