Přímá práce s kaskádovými styly
Obvykle je vhodné pracovat s kaskádovými styly (CSS) tak, že se vše nadefinuje samostatně pro třídu (pokud má styl platit pro více objektů) nebo pro identifikátor (pokud má platit pro jeden objekt). Identifikátor bývá napevno, takže i styl je neměnný, zatímco třídy lze měnit podle potřeby (viz minulý článek) a tak styly přepínat. Existují ale případy, kdy je vhodné, nebo dokonce nezbytné styly nastavovat přímo.
Typickým případem je pozicování. Pokud se má nějaký objekt pozicovat interaktivně nebo dokonce animovaně (plynulý pohyb), přes třídy to řešit nelze. Totéž se týká třeba plynulých změn barvy, velikosti apod. Nehledě na to, že potřebujeme vlastnosti stylů nejen nastavovat, ale také zjišťovat.
Jedna metoda zvládne (téměř) vše
Přímá práce s CSS je v zásadě velmi jednoduchá a pro drtivou většinu operací se používá jen jedna jediná metoda: css(). Mějme například následující fragment HTML kódu:
<h1 id="nadpis1" style="color: blue; font-weight: bold">Nadpis</h1>
Je to prostě jen obyčejný nadpis první úrovně, který je přímo atributem style (ale dalo by se to udělat i v samostatném souboru, například pro všechny elementy h1 nebo pro identifikátor; tady je to jen pro zjednodušení uděláno takto) obarven namodro a má nastavené tučné písmo. Pak můžeme s CSS pracovat například takto:
alert('Barva: ' + $('#nadpis1').css('color') + '\n' + 'Pozadí:' +
$('#nadpis1').css('background-color'));
$('#nadpis1').css('color', '#ffff00').css('font-weight', 'normal');
První řádek zobrazí, jakou barvu tento nadpis má a jak barevné je pozadí. Přestože byla barva nastavena jako „blue“, bude vrácena v jiném formátu (číselného charakteru). Jakém, to bohužel záleží na prohlížeči. Může to být například něco ve stylu rgb(0, 0, 255), ale zaručeno to není.
Pro práci s barvami v jQuery existuje plugin jQuery Color, k němuž se ve vzdálenější budoucnosti dostaneme. Bez něj lze také barvy uchovávat samostatně (v proměnných nebo vlastnostech objektů) a metodou css() je jen nastavovat.
Totéž se týká i barvy pozadí, která nebyla v HTML explicitně nastavena, takže se použije ta, která je definována někde jinde (např. v CSS souboru), případně výchozí barva. Výchozí bude většinou průhledná, takže se zobrazí „transparent“.
Druhý řádek nastavuje novou barvu (bude žlutá) a novou tučnost písma (bude normální, kdežto předtím bylo tučné). Jak si můžete všimnout, lze v tomto případě volání metody css() řetězit, protože vždy vrací opět odkaz na tentýž objekt jQuery.
Místo formátu typu background-color lze použít i backgroundColor jako v klasickém JavaScriptu. V uvedeném případě je to úplně jedno, jsou ale případy, kdy je na to potřeba dávat pozor – viz dále.
Využití objektu a pole jako argumentu
Pokud potřebujete nastavit, nebo zjistit více hodnot najednou, není nutné metodu css() volat na každou jednotlivou hodnotu. Jde to i jednodušeji. Tady je opět příklad:
$('#nadpis1').css({borderLeft : '1px solid silver', 'padding-left' :
'10px', 'background-color' : ''});
var a = ['margin-top', 'margin-bottom'];
var o = $('#nadpis1').css(a);
alert('Okraje: ' + o['margin-top'] + ', ' + o['margin-bottom']);
Příklad ukazuje už v prvním řádku hned několik zajímavých věcí. První je samotné použití objektu jako argumentu. Objekt je nadefinován přímo v místě volání. Jeho první položka je nazvána tím „javascriptovým“ způsobem, což umožňuje vynechat uvozovky a přitom to jQuery správně zpracuje.
Druhá položka využívá klasický CSS zápis – tam jsou uvozovky nutné, protože jinak by to nevyhovovalo syntaxi JavaScriptu. A konečně třetí položka ukazuje, jak zrušit nastavení konkrétní hodnoty – prázdný řetězec ji vrátí do výchozího stavu před jakýmkoliv nastavením, použije se tedy to, co je „zadrátováno“ v prohlížeči (případně v uživatelském stylu, ale to už jde nad rámec seriálu). Takže když bylo například předtím obarveno pozadí nadpisu, použití prázdného řetězce vrátí zpět průhledné pozadí.
Další tři řádky příkladu ukazují zjištění určitých hodnot s využitím objektu. Nejprve se připraví pole názvu CSS parametrů, které se mají zjistit. Pole se předá metodě css() a ta vrátí objekt obsahující jako své položky požadované hodnoty (objekt obdobný jako ten, který se používá při nastavování v prvním řádku).
Pozor na to, že při použití názvů v CSS formátu (např. margin-top) je nezbytné s objektem pracovat pomocí syntaxe asociativního pole, kdežto při použití javascriptového formátu (marginTop) lze použít i klasickou objektovou notaci. Který z formátů budete používat, je na vás. Je ale dobré držet se v celém kódu jednoho, míchání obou formátů nadělá zbytečný zmatek. Názvy ovšem používejte podle specifikace CSS, převod do přesné podoby pro ten který prohlížeč (i při použití javascriptového formátu) zajistí jQuery.
Okraje, podobně jako jiné rozměry, budou vráceny v pixelech (včetně „px“ na konci hodnoty), ať již byly předtím nastaveny v jakýchkoli jednotkách. Při nastavování lze uvést kterékoli povolené jednotky; pokud se vynechají, jQuery hodnoty zpracuje v pixelech.
Na co si ještě dát pozor
Speciální CSS parametry ovlivňující více věcí najednou (neatomické parametry), například margin (zahrnující v sobě margin-left, margin-right atd.) lze bez problémů používat při nastavování; při zjišťování hodnot je však třeba se jim vyhnout. Některé prohlížeče je úspěšně zpracují, obecně to ale neplatí.
Dále je potřeba si uvědomit, že lze metodu css() volat jen na objektech, které jsou součástí DOM. Nelze tedy vyjmout objekt z DOM zavoláním detach() a pak na něj použít metodu css().
Rozměry a pozice
Oblast rozměrů vizuálních objektů a jejich pozice je specifickou oblastí. Je to dáno tím, že se s nimi jednak velmi často pracuje, současně také metoda css() pracuje i s jednotkami, což je mnohdy zbytečné. A v neposlední řadě bývá výhodné nechat některé rutinní výpočty na jQuery a nemuset se s nimi trápit. Je toho trochu více, proto si to necháme na příště.
