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é:

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

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

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

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

Pozri tiež