DOM – objektový model dokumentu 9. – práce se styly

Jak pomocí DOM dynamicky měnit kaskádové styly v dokumentu? Dnes načneme téma, které patří k fundamentům znalostí každého dobrého webmastera.

Problematika manipulace se styly a stylesheety v DOM je přece jen komplikovanější. V první řadě je nutné odlišit dvě rozdílné záležitosti - první je manipulace se stylem určitého DOM objektu (který reprezentuje určitý jednotlivý HTML či XML element) a druhou je práce se stylesheety (konkrétně v praxi hlavně typu text/CSS , tedy stylesheety kaskádových stylů). Zatímco nastavení či změna stylu určitého elementu je poměrně jednoduchá a obecně široce implementovaná v prohlížečích, při manipulace se stylesheety a jejich obsahem se setkáme s nepříliš kompletní a různorodou podporou. Manipulaci se styly a CSS ošetřuje norma DOM Level 2 Style, která se dále dělí na část Style Sheets a část CSS. Zatímco obecná část Style Sheets je relativně dobře implementována, podpora DOM Level 2 CSS je jen částečná a navíc má Microsoft pro některé důležité metody a vlastnosti poněkud odlišná pojmenování. Také je potřeba upozornit na to, že efektivní podpory v této části DOM se dočkáme jen u Internet Exploreru a Mozilly (resp. NN 6.x), přičemž nejdále v implementaci pokročila Mozilla.

Přístup a nastavení stylu objektu typu Element - vlastnost style

Pokud potřebujeme v HTML dokumentu nastavit styl pro jediný jednotlivý element, lze využít atribut style. Hodnotou tohoto atributu je vlastní CSS deklarace (skládající se z nastavení jedné nebo více vlastností), kterou chceme u daného elementu použít. Např.:

<p style="background-color:blue; font-size:15px;">text odstavce....</p>

Nastaví modrou barvu pozadí odstavce a velikost písma na 15 pixelů.

Pokud bychom chtěli analogický výsledek dosáhnout pomocí DOM, nabízí se nám metoda setAttribute(). Například v našem případě by to vypadalo následovně:

objekt_odstavce.setAttribute("style", "background-color:blue; font-size:15px;");

Tento způsob nastavení stylu ale rozhodně nelze doporučit. Jednak existuje elegantnější způsob, a za druhé výše uvedené řešení občas prostě nefunguje (obzvláště v IE).

Jak tedy na nastavení stylu elementu? Přístup k objektu stylu získáme pomocí vlastnosti style. Například:

styl_odstavce = objekt_odstavce.style;

K jednotlivým vlastnostem kaskádového stylu nyní máme přístup skrz vlastnosti objektu stylu. Jména těchto vlastností jsou identická, nebo velmi snadno odvoditelná z názvů vlastností v CSS. Např.:

barva_odstavce = styl_odstavce.color;// získání hodnoty
styl_odstavce.color="#666666";// nastavení

Nebo:

styl_odstavce.backgroundColor="#ffffff";

Jak vidíte, hodnotu CSS vlastnosti lze pomocí příslušných vlastností získat i nastavit. Všimněte si, že CSS vlastnosti, jejichž názvy se skládají z více slov, se píší dohromady a každé jednotlivé slovo kromě prvního začíná velkým písmenem. V souboru kaskádového stylu se názvy těchto vlastností píší s pomlčkami mezi jednotlivými slovy - pokud tedy "převádíme" název CSS vlastnosti do názvu DOM vlastnosti objektu stylu, všechny pomlčky musíme vynechat a na začátku každého slova napsat velké písmeno.

V našem příkladu odpovídá CSS vlastnosti background-color DOM vlastnost backgroundColor. Jiný příklad: CSS vlastnost border-left-width má v DOM název borderLeftWidth.

Někdy je možné v HTML dokumentu dosáhnout stejného výsledku použitím určité DOM vlastnosti elementu (odpovídající určitému atributu elementu, např. vlastnost bgColor u objektu buňky tabulky) i použitím vlastností objektu stylu (tedy např. pomocí objekt.style.backgroudColor). Pokud je to možné a nepřinese to jiné komplikace, lze spíše doporučit druhou variantu. Je to v souladu se současným trendem oddělení logické struktury dokumentu od formátování a vzhledu. Ostatně většina těchto formátovacích atributů je v normě HTML 4.0 zavržena (deprecated), i když je jasné, že při aplikaci na každý element jednotlivě (což je přesně případ nastavení stylu přes objekt konkrétního elementu) se neuplatní praktické výhody tohoto řešení (ty se naplno ukáží až při práci se selektory ve stylesheetech).

V Mozille (a Netscape 6.x) máme k dispozici ještě dvě další vlastnosti, které lze použít ve spojení s objektem stylu. Jsou to vlastnosti media a type. Vlastnost media lze použít pro zjištění i nastavení média pro daný objekt stylu (defaultně má hodnotu "screen"). Vlastnost type je pouze pro čtení a její hodnotou je typ daného stylu, nejčastěji to bývá "text/CSS".

Zjistit a změnit styl určitého elementu tedy již umíme. V podstatě se jedná o obdobný přístup, jako když ve stylesheetu kaskádového stylu nastavujeme deklaraci určitému id. Mějme například toto CSS pravidlo:

#paticka {
  color: blue;
  font-size: 15px;
}

Pomocí DOM lze téhož nastavení stylu dosáhnout takto:

var paticka = document.getElementById("paticka");
paticka.style.color="blue";
paticka.style.fontSize="15px";

Díky možnostem DOM máme při přístupu k jednotlivému elementu více možností, než CSS - vůbec nejsme omezeni na elementy s definovaným atributem id. Co však udělat, pokud potřebujeme nastavit styl nikoliv pouze jedinému elementu, nýbrž celé kolekci elementů, například stejného jména? V CSS lze toto vyřešit velmi jednoduše:

p {
  color: blue;
  font-size: 15px;
}

Pomocí přístupu k objektu stylu každého elementu lze tento úkol vyřešit také:

function nastavStyl() {
  var odstavce = document.getElementsByTagName("p");
      for(i=0; i<odstavce.length; i++) {
        odstavce[i].style.color="blue";
        odstavce[i].style.fontSize="15px";
      }
  }
}

Využitím metody getElementsByTagName() získáme kolekci elementů daného názvu a poté pomocí cyklu for postupně změníme příslušné vlastnosti stylu.

Vypadá to jako zcela "košer" řešení, ovšem je nutné upozornit na jeden zásadní problém - tento způsob není souměřitelný s výše uvedenou CSS deklarací.

Proč? Rozdíl uvidíme, pokud budeme přidávat pomocí DOM další element <p> do dokumentu. V případě, že vlastnosti stylu budou definovány ve stylesheetu pomocí standardní CSS deklarace, přidaný element převezme tyto vlastnosti a automaticky bude mít modré pozadí a velikost písma 15px. V druhém případě, pokud jsme styl nastavovali individuálně pro každý jednotlivý element pomocí objektu stylu, bude nový element zcela "styluprostý" (pokud se tedy na něj nebude vztahovat jiná deklarace stylu). Abychom dosáhli nastavení stylu odpovídající uvedené CSS deklaraci, museli bychom u tohoto nového objektu nastavit styl pomocí DOM individuálně, popřípadě provést opětovné nastavení všech elementů daného jména novým voláním funkce nastavStyl(). Podobný problém budeme mít, pokud budeme chtít nastavit deklaraci určité třídy (class) atd. Jistě se mnou budete souhlasit, že v tomto případě je řešení přes styl každého jednotlivého elementu poněkud těžkopádné. Naštěstí máme v DOM prostředky, které nám dovolí manipulovat s celými stylesheety, jejich pravidly (rules) a jednotlivými CSS vlastnostmi. Pojďme si nyní zabývat těmito možnostmi. Celé téma dnes již nestihneme vyčerpat a tak se jím budeme věnovat hlavně v příštím díle.

Manipulace se stylesheety

Ke kolekci stylesheetů přidružených k dokumentu získáme přístup pomocí vlastnosti styleSheets[] objektu document. Vlastnost vrací pole objektů typu styleSheet reprezentující všechny tabulky stylů.

var stylesheety = document.styleSheets;

Objekt typu styleSheet disponuje několika vlastnostmi. Asi nejdůležitější je vlastnost disabled. Vlastnost nabývá hodnoty true, pokud je stylesheet aktuálně "vypnut" (buď pomocí atributu disabled přímo v HTML kódu, nebo dynamicky skrz DOM), nebo hodnoty false, pokud je stylesheet aktivní. Vlastnost je použitelná i pro nastavení:

var vypnuty = stylesheety[1].disabled; // vrací true or false
stylesheety[1].disabled=true; // vypne druhý stylesheet
stylesheety[1].disabled=false; // zapne druhý stylesheet

Využití vlastnosti disabled se přímo nabízí, pokud je potřeba kompletně změnit vzhled stránky přímo v prohlížeči - načteny jsou všechny stylesheety a poté dle konkrétní potřeby vypínány a zapínány pomocí vlastnosti disabled. Podívejte se na příklad.

Dalšími vlastnostmi objektu typu styleSheet jsou type, title a href. Vlastnost type vrací typ stylesheetu (nejčastěji je to "text/CSS "), vlastnost title vrací hodnotu atributu title (je možné použít i pro nastavení) a vlastnost href vrací URL stylesheetu, pokud je uložen v externím souboru. Pokud je stylesheet součástí dokumentu, vrací tato vlastnost prázdný řetězec v IE, naopak v Mozille je výsledkem URL samotného HTML dokumentu. Další rozdíl mezi IE a Mozillou je ten, že Mozilla vrací za všech okolností absolutní URL, kdežto Internet Explorer vrátí vždy URL tak, jak je zadána v kódu.

var type = stylesheety[1].type;
var title = stylesheety[1].title;
stylesheety[1].title = "defaultní styl"; // nastavení
var href = stylesheety[1].href;

Další vlastností objektu typu styleSheet je media. Vlastnost funguje v IE i v Mozille, ale rozdílným způsobem. V Internet Exploreru vrací tato vlastnost textový řetězec (hodnotu atributu media), kdežto v Mozille (alespoň ve verzi 0.9.9) je výsledkem nikoliv řetězec, ale objekt typu MediaList. Tento objekt disponuje dalšími vlastnostmi a metodami. Ač to vypadá komplikovaně, je potřeba upozornit na to, že Mozilla se tak chová striktně dle standardu DOM Level 2 CSS (na rozdíl od IE).

Podívejme se tedy na vlastnosti a metody objektu typu MediaList v Mozille. Jedná se o vlastnosti length a mediaText a metody appendMedium() a deleteMedium(). Vlastnost length vrací délku, tj. počet "medií" daného stylesheetu. Vlastnost mediaText vrací seznam názvů všech médií stylesheetu. Jednotlivé názvy jsou odděleny čárkou. Nový typ média můžeme ke stylesheetu přidružit pomocí metody appendMedium(). Název nového média je předáván v parametru této metody. Analogickým způsobem je možné odstranit médium ze seznamu - k tomu slouží metoda deleteMedium(). Jako parametr metody slouží opět název média, které chceme odstranit.

Syntaxe:

var media = stylesheety[1].media;
stylesheety[1].media = "print"; // nastavení pouze v IE

A poté pouze v Mozille:

var pocet_medii = media.length;
var seznam_medii = media.mediaText; // seznam_medii (v Mozille) == media (v IE)
media.appendMedium("print");
media.deleteMedium("screen");

Pro dnešek výklad ukončíme. Další vlastnosti a metody, které nám umožní měnit obsah stylesheetů a tedy vlastní kaskádové styly v dokumentu, si necháme na příště. Ukážeme si, jak manipulovat s "vnořenými" stylesheety, jaké patálie nás čekají, pokud budeme chtít přistupovat a měnit jednotlivá pravidla (rules) ve stylesheetu a nakonec je pro vás opět připravena shrnující tabulka.

Diskuze (4) Další článek: Společnost Diderot v konkursu

Témata článku: Software, Internet, Programování, Internet Explorer, Druhý případ, Mode, IE 10, CSS vlastnost, Druhý typ, Code, Dóm, Objektový, Dokument, Práce, Odlišné zjištění, Určitý objekt, Doma, Jednotlivá buňka, Dok, Celé téma, Element, Model, DOM, Rozdílná velikost, Model S


Určitě si přečtěte

Vodafonu se zhroutila kabelovka. Síť bývalého UPC má výpadky
Lukáš Václavík
VodafoneUPC
Vážně dnes ještě někdo krade Adobe? Video můžete stříhat zdarma v Resolve a fotky i vektory zvládne Affinity

Vážně dnes ještě někdo krade Adobe? Video můžete stříhat zdarma v Resolve a fotky i vektory zvládne Affinity

** Kde jsou ty doby, kdy měl skoro každý doma Photoshop ** Photoshop a Premiere Pro od kamaráda nebo z warezu ** Dnes už to nemá smysl, existuje totiž hromada laciných alternativ

Jakub Čížek | 92

Jakub Čížek
Grafický editorStřih videa
Volitelná aktualizace Windows 10 opravila několik chyb, způsobila ale další problémy
Karel Kilián
Windows UpdateAktualizaceWindows 10
Finanční správa tento měsíc spustí Moje Daně. Přiznání má být hračka
Lukáš Václavík
eIdentitaČeskoeGovernment
Apple Macbook Air M1: testujeme výkon, výdrž, a hlavně kompatibilitu aplikací [průběžně aktualizováno]

Apple Macbook Air M1: testujeme výkon, výdrž, a hlavně kompatibilitu aplikací [průběžně aktualizováno]

** Testujeme Apple Macbook Air s procesorem M1 ** Zajímá nás nejen výkon, ale zejména kompatibilita aplikací ** Článek je průběžně doplňován na základě vašich dotazů

Jiří Kuruc | 209

Jiří Kuruc
Apple

Aktuální číslo časopisu Computer

Megatest rychlých Wi-Fi 6 routerů

Jak ztišit počítač

Velký test mATX skříní