Dynamické změny vzhledu stránky pomocí CSS a JavaScriptu

V dnešní době se již stává standardem definovat vizuální podobu stránky výhradně pomocí CSS. Definice CSS pro každý prvek stránky jsou v dnešních prohlížečích přístupné pomocí JavaScriptu, což umožňuje jednoduše měnit vzhled stránky na základě akcí uživatele.

Přistupování k prvku

Abychom mohli měnit CSS vlastnosti určitého prvku webové stránky, musíme nejdříve vědět, jak se k takovému prvku dostat v objektovém modelu dokumentu. Základem je si takový prvek pojmenovat pomocí identifikátoru ID. Například takto:

Pokud již máte prvek vytvořen, můžete se na něj odvolávat v JavaScriptu, a to pomocí metody getElementById objektu document:

Metoda getElementById() byla popsána W3C ve specifikaci DOM, a proto by ji měl podporovat každý moderní prohlížeč, pro kterého nejsou webové standardy jen prázdným pojmem. V praxi ji znají Internet Exporer 5 a vyšší, Opera 4 a vyšší, Mozilla a také Netscape 6.

Kromě tohoto zápisu ještě existuje nestandardní zápis document.all, který zná Internet Exporer. V praxi je tento zápis vhodné uvádět kvůli IE 4, který nezná standardní zápis. Můžete si ale šikovně dopomoci tímto řádkem kódu:

Díky tomu bude v IE 4 přiřazen objektu document.getElementById objekt document.all, a vy se nebudete muset pokaždé vypisovat s oběma alternativami.

Poznámka: Kromě uvedených zápisů můžete použít také slovo this, kterým se odkážete na aktuální prvek, nebo metodu getElementsByTagName(‚jméno tagu‘), která obsahuje pole všech tagů se stejným jménem.

Nyní tedy víte, jak se odvolat na prvek webové stránky, ale potřebujete se ještě dostat k jeho CSS vlastnostem. Toho dosáhnete pomocí zápisu prvek.style.vlastnost. Pokud byste například chtěli při nahrání stránky do prohlížeče změnit barvu písma v elementu mujPrvek, uděláte to takto:

Jednotlivé vlastnosti a jejich hodnoty

Už tedy víte, jak se k jednotlivým vlastnostem dostat, a nyní se podívejte na to, jaká jsou jména jednotlivých vlastností. Jsou to vlatně věškeré CSS vlastnosti, které je možné prvku přiřadit s tím, že pokud se v názvu vlastnosti nachází pomlčka (například background-color), musíte ji vypustit a následující písmeno napsat velké (vznikne vám tedy backgroundColor). Hodnoty jednotlivých vlastností jsou stejné jako v CSS, ale musíte je uvádět v uvozovkách. Také pokud jsou součástí hodnoty jednotky (např. 12 px), měli byste je uvádět i ve skriptu.

Pokud používáte v CSS tzv. shorthandy, tedy zkrácené definice příbuzných vlastností (např. font nebo border), můžete bez obav modifikovat jakoukoli vlastnost, kterou takový shorthand zastupuje, aniž byste nějak ovlivnili jinou vlastnost z shorthandu. Ve skriptech můžete samozřejmě tyto shorthandy využívat také.

Nyní se podívejte na následující tabulku. V levém sloupečku se nachází vždy jméno vlastnosti v CSS, v pravém potom její jméno pro použití ve skriptech. Není to kompletní seznam, vybíral jsem jen ty vlastnosti, u kterých se mi jejich modifikace zdá opodstatněná (kompletní seznam všech vlastností najdete ve specifikaci CSS 2, jejich název pro použití v JavaScriptu získáte podle návodu výše):

V předchozí tabulce jsem červeně zvýraznil ty vlastnosti, které nutí prohlížeč přeformátovat stránku. To může na pomalejších počítačích trvat poměrně dlouho, což uživatele takového počítače odradí. Hlavně ale takové efekty nevypadají příliš esteticky a slušný webdesigner by se jich měl až na nutné výjimky vyvarovat – nenechte se ovlivnit tím, že je používají některé známé servery.

Nyní ještě krátce k vlastnoti display. Určitě byste neměli dynamicky měnit zobrazování prvků blokových na řádkové a opačně! V úvahu přichází pouze změna z hodnoty none na block nebo inline (případně opačně). To se hodí například, pokud chcete v odstavci kus textu skrýt a ukázat ho až po nějaké akci uživatele (tím se také zabývá náš druhý příklad). Jinak se ale spíše snažte používat vlastnost visibility, která nenutí prohlížeč přeformátovat stránku.

Chtěl bych vás upozornit také na to, že většina prohlížečů nepodporuje dynamické změny všech těchto vlastností, a proto je třeba si stránku s těmito efekty nejprve vyzkoušet ve více prohlížečích.

Také byste si měli uvědomit, že pokud na stránce budete nevhodným způsobem modifikovat například pozadí nebo vlastnosti textu, může se obsah stránky stát nečitelným. Také byste neměli s těmito efekty příliš hýřit, nebo to bude na vaší stránce vypadat jako v cirkuse – měly by to být spíše dokořeňující prvky vaší stránky, které uživatele zaujmou.

Vlastnost outline

Ve standardu CSS 2 byly mimojiné představeny vlastnosti outline, outline-color, outline-style a outline-width. Tyto vlastnosti jsou přímo určeny k použití v dynamických změnách, kterými se dnes zabýváme. Jsou obdobné jako vlastnosti border, border-color, border-style a border-width (definují tedy rámeček kolem prvku) a používají i stejné hodnoty (vlastnost outline-color může navíc používat hodnotu invert, která znamená opačnou barvu než má podklad). Mají ale jednu velmi podstatnou odlišnost – nezasahují do boxového modelu prvku. Znamená to tedy, že při jejich změně nemusí prohlížeč přeformátovat stránku, ale pouze zobrazí obrys prvku, a to kolem oblasti border prvku. Mohou se používat jak ve skriptech, tak v CSS, například pomocí pseudotříd :hover, :active nebo :focus. Věnuje se jim první příklad.

Příklady

Nyní vám představím dva příklady, na kterých budu demonstrovat možnosti dynamických změn vzhledu stránky.

Příklad 1

Kolem tohoto odkazu by se měl po přejetí myší objevit 2 pixely široký červený obrys – neznám ale prohlížeč, který by to dokázal :)

Jak už jsem naznačil, jediná chyba vlastnosti outline je v její podpoře v prohlížečích – ty se bohužel tváří, jako by neexistovala.

Příklad 2

Webové standardy definuje organizace W3C. * (Ne vždy jsou ale podporovány webovými prohlížeči.) Její webová adresa je http://w3.org.

Tento efekt již podporují všechny prohlížeče, o kterých jsem mluvil výše, kromě Opery.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.