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

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

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

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

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

Viz také