Slabikář JavaScriptu – práce s vkládanými styly

17. června 2002

•

Formátování HTML stránek je nejjednodušší a nejefektivnější pomocí kaskádových stylů. Pomocí JavaScriptů lze tyto styly měnit a dosahovat tak jednoduše a průhledně zajímavých dynamických efektů. Následující článek vám ukáže, jak ovládat vkládané styly, které jsou obsaženy v hlavičce HTML dokumentu.

Kaskádovým stylem formátujeme většinou skupinu prvků. Mohou to být například všechny elementy stejného typu (častým příkladem jsou hypertextové odkazy) nebo podmnožina elementů, které mají stejnou hodnotu atributu CLASS nebo i konkrétní prvek identifikující se svým atributem ID. Pro každý CSS style sheet je použitelné rozhraní CSSStyleSheet interface, díky němuž je možné přistupovat do kolekce pravidel (cssRules) a pomocí definovaných metod s nimi manipulovat. Všechny CSS objekty v Document Object Model jsou takzvaně živé, což znamená, že jejich změna se okamžitě projeví v zobrazení aktuálních prvků, které jsou jimi formátovány.

Uveďme příklad stylů, na nichž budeme názorně demonstrovat použití dostupných metod a vlastností, ke kterým lze přistupovat JavaScriptem. V oddílu HEAD dokumentu budou zapsány styly:

<STYLE type=“text/css“ media=“all“>
TD.dark {
  font-size:12px;
  font-family:“arial“;
  background-color: silver;
  color: white;
}
TD.light {
  background-color: silver;
  color: white;
}
</style>
<style type=“text/css“ media=“print“>
  div.ne { display: none }
</style>

Pokud budeme chtít k takto definovaným stylům přistupovat JavaScriptem, musíme si uvědomit, že zde máme kolekci dvou style sheets, jejíž jednotlivé prvky reprezentují elementy STYLE. Přistupujeme k nim například takto:

var ss1=document.styleSheets[0] var ss2=document.styleSheets[1]

Jako každá kolekce i tato má svou vlastnost length, která má hodnotu 2 (tj. document.styleSheets.length je rovno 2). Každý style sheet obsahuje kolekci formátovacích pravidel cssRules, která jsou v něm definována. Každé pravidlo má vlastnost selectorText, která obsahuje název pravidla, a vlastnost cssText s jeho definicí. Ukažme si to konkrétně s odvoláním na uvedený příklad:

document.styleSheets[0].cssRules[0].selectorText má hodnotu „td.dark“
document.styleSheets[0].cssRules[1].selectorText má hodnotu „td.light“
document.styleSheets[1].cssRules[0].selectorText má hodnotu „div.ne“
document.styleSheets[0].cssRules[1].style.cssText má hodnotu „background-color: silver; color: white;“

Tady nastávají první potíže při použití různých internetových prohlížečů. Hodnoty vlastností jsou nestejné, co se týká použití velkých a malých písmen (například td.dark vs. TD.dark), formátovací vlastnosti v cssText mohou být přehozené (tj. nejdříve color a potom teprve background-color), hodnota vlastnosti cssText nemusí být zakončena středníkem. S tím vším musí programátor počítat, když chce se styly manipulovat. Dalším problémem je, že MSIE nedodržuje standard a místo klíčového slova cssRules používá rules.

Další důležitou informací je, že všechny popsané vlastnosti jsou pouze pro čtení a není je možné měnit. Jak tedy dosáhnout změny stylu a tím i dynamického efektu na HTML stránce? Odpověď je jednoduchá: pravidlo je třeba smazat, vytvořit znovu a vložit ho do kolekce cssRules (respektive rules).

K tomu slouží metody deleteRule a insertRule. Metoda deleteRule má jediný parametr a tím je index pravidla v kolekci cssRules, které má být odstraněno. Metoda insertRule má parametry dva. Prvním je textová reprezentace celého pravidla (například td.light {background-color: silver; color: white;}), druhým parametrem je index v kolekci cssRules, kam se má pravidlo vložit.

Bohužel i zde jde – patrně z historických důvodů – MSIE svou vlastní cestou. Používá vlastnosti removeRule a addRule. Jediný parametr metody removeRule má stejný význam jako u metody deleteRule. V případě metody addRule je však situace jiná. Její první parametr má význam vlastnosti selectorText daného pravidla, druhý se shoduje s vlastností style.cssText. Je nutné přiznat, že definice atributů, jak je používá MSIE, je jednodušší pro práci na dynamických stránkách, neshoduje se však se standardem DOM CSS.

Příklad v tomto článku mění barvu pozadí a písma vybraných buněk tabulky. Byl vyzkoušen v MSIE 5.5 SP 2 a Netscape 7.0 Preview Release 1. V „živé“ podobě ho naleznete na samostatné stránce, zde si ukážeme jeho zdrojový kód:

<HTML>
<HEAD>
<TITLE>Styly</TITLE>
<STYLE>
TD.dark {
  font-size:12px;
  font-family:“arial“;
  background-color: silver;
  color: white;
}
TD.light {
  background-color: silver;
  color: white;
}
</STYLE>
<SCRIPT>
function addRule (selector, rule, atrib) {
if (document.all){
    var ss=document.styleSheets[0].rules;
    var nazev=“removeRule“
    var pravidlo=“addRule(selector, rule)“
}else{
    var ss=document.styleSheets[0].cssRules;
    var nazev=“deleteRule“
    var pravidlo=“insertRule(selector + ‚ { ‚ + rule + ‚ }‘, 0)“
}
for (var intI=0; intI<ss.length; intI++) {
  if (ss[intI].selectorText.toLowerCase()==selector.toLowerCase()) {
    var strTemp = ss[intI].style.cssText.toLowerCase()
    var pocet=strTemp.length
    var prvni=strTemp.indexOf(atrib+“: „,0)
    if (prvni>-1) {
        var posledni=strTemp.indexOf(„;“,prvni)
        var levy = strTemp.substring(0,prvni)
        var pravy=““
        if (posledni>-1) {
          pravy = strTemp.substring(posledni+1,strTemp.length)
        }
        rule=levy + rule + pravy
      }
    eval(„document.styleSheets[0].“+nazev+“(intI)“)
    break
  }
}
eval(„document.styleSheets[0].“+pravidlo)
}
</SCRIPT>
</HEAD>
<BODY>
<input type=“button“ value=“Černé pozadí“ onClick=“addRule(‚td.dark‘, ‚background-color: black;‘, ‚background-color‘)“>
<input type=“button“ value=“Šedé pozadí“ onClick=“addRule(‚td.dark‘, ‚background-color: silver;‘, ‚background-color‘)“><br>
<input type=“button“ value=“Modré písmo“ onClick=“addRule(‚td.dark‘, ‚color: blue;‘, ‚ color‘)“>
<input type=“button“ value=“Bílé písmo“ onClick=“addRule(‚td.dark‘, ‚color: white;‘, ‚ color‘)“><br>
<TABLE>
<TR>
  <TD CLASS=“dark“>
    První buňka
  </TD>
  <TD CLASS=“dark“>
    druhá buňka
  </TD>
</TR>
  <tr><td colspan=“2″ class=“light“>Třetí buňka</td></tr>
</TABLE>
</BODY>
</HTML>

Obecně lze říci, že dynamická změna stylů je velmi vhodná pro vytváření mnohých dynamických efektů na HTML stránkách.