jQuery width() vs. css(‚width‘) při border-box

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).

width:100%; box-sizing:default
width: 100%; box-sizing:border-box

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.

$el.width(‚100%‘); box-sizing:default
$el.css(‚width‘, ‚100%‘); box-sizing:default
$el.width(‚100%‘); box-sizing:border-box
$el.css(‚width‘, ‚100%‘); box-sizing:border-box

Jak je vidět, správného výsledku dosáhnete jen tehdy, pokud budete používat metodu css().

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *