Proč nepoužít metodu css()?
Mějme následující kus HTML kódu:
<div id="blok" style="width: 160px; height: 100px> ... </div>
Každý jistě hned vidí, že to je blok o rozměrech 160 x 100 pixelů, v němž je nějaký obsah. Teď budeme potřebovat blok o něco rozšířit, přičemž nebudeme moci vycházet z původní šířky, nýbrž z té aktuální. Jednou z možností je použít již dobře známou metodu css():
$('#blok').css('width', (Number($('#blok').css('width').replace('px', '')) + 40) + 'px');
Takový kód je poměrně dlouhý, špatně srozumitelný a navíc výkonově neefektivní. Co totiž dělá? Získá hodnotu v pixelech, která je vyjádřena včetně jednotek a tedy jako řetězec. Ten se musí zbavit jednotek, převést na číslo, přičíst požadované rozšíření, převést zpět na řetězec a připojit jednotky (poslední dva kroky lze i vynechat, proběhnou automaticky).
Novější verze jQuery (od 1.6) to umožňují zapsat podstatně jednodušeji. Metoda css() přijímá „relativní hodnoty“ a lze tedy příklad přepsat do této podoby:
$('#blok').css('width', '+=40');
To už je výrazně příjemnější, ale jen v případě, že se přidává pevně definovaná hodnota, kterou lze zapsat přímo do řetězce. Získáme-li však tuto hodnotu odjinud, řetězec by se musel „lepit“ dohromady. Především je tu ale pořád problém s výkonem, protože se nelze obejít bez zpracování řetězce.
Metody pro práci s rozměry
Pokud potřebujeme s rozměry provádět nějaké výpočty, nejlepší bývá používat k tomu určené metody – tedy width() a height(). Slouží jak ke zjišťování rozměrů, tak k jejich nastavování. Pracuje se s čísly bez jednotek, rozměry jsou vyjádřeny v pixelech. Výše uvedený příklad by se přepsal do této podoby:
var b = $('#blok');
b.width(b.width() + 40);
Při použití pro zjištění šířky se pracuje pouze s prvním objektem v instanci jQuery (pokud by jich tam bylo víc), při nastavování se nová šířka nastaví všem.
Při zjišťování šířky může metoda vrátit i desetinné číslo. Obvykle to není nijak na závadu, ale je dobré s tím počítat.
Při nastavování není hodnota omezena jen na číslo – lze použít i jednotky, resp. cokoli, co by se použilo při volání metody css() – například i řetězec „auto“. V případě pixelů je to samozřejmě zbytečné.
Podobně jako se pro šířku používá metoda width(), pro výšku je tu height(). Pracuje se s ní úplně stejně, takže k ní není v podstatě co dodat. Snad jen to, že lze při nastavování rozměrů metody řetězit, protože vracejí příslušnou instanci jQuery:
$('#blok').width(300).height(200);
Příklad je zcela zřejmý, nastaví šířku výše popsaného bloku na 300 a výšku na 200 pixelů.
Pozor ještě na jednu významnou odlišnost oproti css(). Metody width() a height() vždy vracejí rozměry obsahu, tedy bez vnitřního odsazení (padding) a ohraničení (border). Naopak css('width'), resp. css('height') vrací rozměry podle aktuálního nastavení box-sizing, která při hodnotě border-box a padding-box znamená připočtení odsazení i ohraničení, resp. jen odsazení. Je třeba to mít na paměti.
Další rozměrové metody
Někdy potřebujeme velikost včetně vnitřního odsazení, případně i ohraničení (viz další informace výše). Pak využijeme další dvojice metod, které jQuery nabízí. Jsou to innerWidth() a innerHeight(), resp. outerWidth() a outerHeight(). První dvě připočtou k rozměrům i vnitřní odsazení (padding), druhé dvě navíc ještě ohraničení (border) a případně i vnější odsazení (margin).
Všechny z uvedených metod lze použít i k nastavování a platí pro ně stejná pravidla jako pro width() a height(). Ovlivňují vždy jen rozměry obsahu, do ostatních parametrů nezasahují (fungují, jako kdyby odečetly příslušné „okraje“ a pak zavolaly metodu pro nastavení čisté velikosti).
Metody pro práci s pozicemi
Podobná situace jako u rozměrů je také u pozic. Je to ale trochu složitější – může nás totiž zajímat hned vícero druhů pozicování. Běžně (v CSS) se pozice počítají vzhledem k tzv. obsahujícímu bloku, jehož určení nemusí být úplně jednoduché. Proto se mnohdy hodí pracovat raději s pozicováním v rámci celého dokumentu.
Pozice vůči obsahujícímu bloku
Toto je pozice, jakou známe z CSS (vlastnosti left, right, top a bottom). Počítá se vůči obsahujícímu bloku, což je – zjednodušeně řečeno – nejbližší nadřazený blok, který má vlastnost position nastavenou na absolute, relative nebo fixed. Pokud takový blok na cestě vzhůru není, počítá se pozice vůči celému dokumentu (v případě pozicování fixed vůči obrazovce, resp. u stránkovaného tisku vůči stránce).
Je to tedy podobné, jako když zjišťujeme rozměry – místo metody css(), která by zde šla použít, použijeme speciální metodu určenou jen pro pozice: position(). Tady je však jiné to, že se pozice nezjišťuje po jednotlivých složkách, nýbrž celá v jediném volání. Návratovou hodnotou je objekt obsahující složky left a top.
var pos = $('#blok').position();
alert('Pozice: ' + pos.left + ', ' + pos.top);
Příklad zjistí aktuální pozici bloku a vypíše ji do notifikačního dialogu. Čísla neobsahují jednotky, jsou v pixelech a opět mohou být i desetinná. Přepsáno pro metodu css() by to vypadalo nějak takto:
var l = $('#blok').css('left').replace('px', '');
var t = $('#blok').css('top').replace('px', '');
alert('Pozice: ' + l + ', ' + t);
Je to samozřejmě pomalejší a těžkopádnější, na druhou stranu lze získat i pozice z opačných stran (tj. right a bottom), což metoda position() neumožňuje. Tato metoda neumožňuje ani nastavování pozice. Potřebujeme-li ji nastavit vůči obsahujícímu bloku, nezbude než sáhnout po metodě css():
var pos = $('#blok').position();
$('#blok').css('left', pos + 40);
Netřeba snad připomínat, že pokud by se tento kód použil přímo na objekt z HTML fragmentu na začátku článku, nic by se nestalo – výchozí pozicování je totiž „statické“ a s objektem proto nelze hýbat. Muselo by se, ať už jakýmkoli způsobem, nejprve změnit například na absolute nebo relative.
Pozice vůči dokumentu
Tohle nejspíš využijeme častěji. Pozice vůči dokumentu je nezávislá na tom, přes jaké bloky k objektu vede cesta. Máme k dispozici metodu offset(), jež vrací úplně stejný objekt jako position(), jen samozřejmě často s jinými hodnotami. Příklad pro zjištění pozice tedy můžeme přepsat:
var pos = $('#blok').offset();
alert('Pozice: ' + pos.left + ', ' + pos.top);
Změní se jen název metody, jinak je vše stejné. Skutečně „zábavné“ to ale začíná být až v okamžiku, kdy tutéž metodu použijeme pro nastavení pozice:
var pos = $('#blok').offset();
pos.left += 40;
$('#blok').offset(pos);
Jak vidíte, objekt se souřadnicemi se použije i pro nastavení nové pozice. Tady ale navíc proběhne „kouzlo“, které posune i blok, u kterého to „nejde“, tedy třeba ten z výše uvedeného HTML kódu. Pokud je totiž blok pozicován staticky, metoda to automaticky přehodí na relativní pozicování. Pak už samozřejmě pozici změnit lze.
Funkce jako parametr
Mnohé z dosud popsaných metod (a řada dalších) přijímá jako parametr nejen nějakou konkrétní hodnotu, ale také funkci. K čemu je to dobré a jak se s tím pracuje, se podíváme v příštím dílu seriálu.