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

19. března 2002

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:

<div id=“mujPrvek“ style=“color:blue;“>Tady je text mého prvku</div>

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

<script type=“text/javascript“>
var prvek = document.getElementById(‚mujPrvek‘);
</script>

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:

<script type=“text/javascript“>
if (!document.getElementById && document.all) document.getElementById = document.all;
</script>

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:

<html>
<head>
<title>Stránka se změnou písma</title>
<script type=“text/javascript“>
if (!document.getElementById && document.all) document.getElementById = document.all;
function zmenBarvu()
{
  document.getElementById(‚mujPrvek‘).style.color = ‚red‘;
}
</script>
</head>
<body onload=“zmenBarvu();“>
<div id=“mujPrvek“ style=“color:blue;“>Tady je text mého prvku</div>
</body>
</html>

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

CSS JavaScript
background
background-attachment
background-color
background-image
background-position
background-repeat
background
backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
border
border-color
border-style
border-width
všechny ostatní vlastnosti týkající se rámečku, jako jsou border-bottom, border-bottom-color apod.
border
borderColor
borderStyle
borderWidth
bottom bottom
clip clip
color color
cursor cursor
display display
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
font
fontFamily
fontSize
fontSizeAdjust
fontStretch
fontStyle
fontVariant
fontWeight
height height
left left
letter-spacing letterSpacing
line-height lineHeight
list-style
list-style-image
list-style-position
list-style-type
listStyle
listStyleImage
listStylePosition
listStyleType
outline
outline-color
outline-style
outline-width
outline
outlineColor
outlineStyle
outlineWidth
overflow overflow
right right
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-shadow textShadow
text-transform textTransform
top top
vertical-align verticalAlign
visibility visibility
width width
word-spacing wordSpacing
z-index zIndex

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

<style type=“text/css“>
a.mojeTrida:hover {outline: red solid 2px;}
</style>
<a class=“mojeTrida“ href=“javascript:alert(‚Nic‘);“>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 :)</a>

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

<style type=“text/css“>
#dodatek {display: none;}
</style>
<script type=“text/javascript“>
var jeVidet = false;
if (!document.getElementById && document.all) document.getElementById = document.all;
function dodatek()
{
  document.getElementById(‚dodatek‘).style.display = (jeVidet ? ‚none‘ : ‚inline‘);
  jeVidet = (jeVidet ? false : true);
}
</script>
<div>Webové standardy definuje organizace W3C. <a id=“hvezdicka“ href=“javascript:dodatek();“>*</a> <span id=“dodatek“>(Ne vždy jsou ale podporovány webovými prohlížeči.) </span>Její webová adresa je <a href=“http://w3.org“>http://w3.org</a>.</div>

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.

Mohlo by vás také zajímat

Nejnovější

3 komentářů

  1. MP

    Čvc 27, 2011 v 16:54

    firefox to ty okraje zobrazí

    Odpovědět
  2. Radek

    Lis 13, 2012 v 18:03

    Chrome to zobrazí taky. Nedivil bych se, kdyby to psal uživatel IE šestky.

    Odpovědět
  3. Miroslav Kučera

    Lis 14, 2012 v 11:45

    Radek a MP: možná jste si nevšimli, že se jedná o článek, který je deset let starý a informace v něm uvedené jsou samozřejmě poplatné době vydání?

    Odpovědět

Napsat komentář

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