Nastavit nebo přečíst šířku prvku přes jQuery lze dvěma (zdánlivě rovnocennými) způsoby:
$el.width('100%');
$el.css('width', '100%');
$el.css({width: '100%'}); //alternativní zápis
// předchozího způsobu
Ve většině případů se chovají stejně – v tomto případě prostě nastaví prvku šířku na 100% jeho rodiče.
Pokud ale danému prvky nastavíte vlastnost box-sizing na border-box, najednou se začnou výsledky těchto zůsobů rozcházet a pokud je střídáte pro nastavení stejné velikosti (např. protože kód psali dva různí programátoři, a každý preferuje jiný zápis), může se prvek chovat dost podivně.
Vysvětlení: ve většině prohlížečů se pomocí CSS vlastností width a height nastavuje šířka/výška samozného prvku bez okrajů a rámečků. Pokud má tedy prvek šířku 100px a okraj 1px, celý jeho šířka je 102px (okraj vlevo + vpravo). Někdy je ale potřeba, aby prohlížeč spočítal šířku vč. okraje, a k tomu právě slouží vlastnost box-sizing:border-box. Díky ní pak prohlížeč vypočte velikost prvku jako (zadaná velikost – šířka rámečku – šířka paddingu).
jQuery metoda css() funguje stejně jako přímé nastavení v CSS pravidle. Nastaví tedy vlastnost width, která se řídí tím, zda je border-box nastaven, či nikoliv.
Naproti tomu metoda width() vždy nastavuje šířku samotného prvku – a pokud má prvek nastaven border-box, prohlížeč pak zadanou hodnotu přepočte tak, aby byl výsledek stejný, jako kdyby border-box nastavený nebyl. Z hodnoty 100% se pak záhadně stane 104%, protože prohlížeč připočte 2% pro každý border.
Jak je vidět, správného výsledku dosáhnete jen tehdy, pokud budete používat metodu css().