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

    3

    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.

    3 Příspěvků v diskuzi

    Napsat komentář: MP Zrušit odpověď