[ 11. May 2000]
- Martin_Nemecek
CSS a JavaScript [8.Φas¥ serißlu o CSS]
KaskßdovΘ Üt²ly, alebo CSS maj· v²razn· previazanos¥ s HTML Φo umo₧≥uje tvorcovi web strßnky v²razn²m sp⌠sobom podriadi¥ formßtovanie celej strßnky a CSS plne vyu₧i¥ ku svojmu prospechu. Ako si pri tomto dokß₧eme pom⌠c¥ JavaScriptom si ukß₧eme v nasledovnej Φasti nßÜho serißlu.
Pomocou CSS, ako vieme, je jednoduchΘ a praktickΘ ovlßdanie HTML tagov a ich formßtovanie, ovlßdanie formßtovania textu, pozφcie, a celkovΘho aran₧ovania HTML strßnky. Tieto pokusy u₧ mßme za sebou z predchßdzaj·cich Φastφ ale samozrejme budeme sa im venova¥ aj v bud·cnosti. VyΦerpa¥ toti₧ tΘmatiku Kaskßdov²ch Üt²lov je ve╛mi ¥a₧kΘ, hlavne v tejto dobe ke∩ prichßdza naprφklad Üpecifikßcia CSS2, alebo zaΦle≥ovanie CSS do XML, novΘho formßtovacieho (znaΦkovΘho) jazyka. T²m naberaj· KaskßdovΘ Üt²ly nov² rozmer a urΦite sa im je potrbnΘ venova¥.
Dnes by sme sa vÜak mali zamera¥ na spoluprßcu CSS a JavaScriptu a hlavne otßzkou sprφstupnenia vlastnostφ CSS tomuto populßrnemu scriptovaciemu jazyku.
Na zaΦiatok by nebolo zlΘ podotkn·¥, ₧e Microsoft Internet Explorer a Netscape Communicator maj· odliÜn· implementßciu "Document Object Model" - (DOM), z Φoho vypl²va nutnos¥ postupova¥ pri zostavovanφ v²slednΘho k≤du dvoma sp⌠sobmi. Sp⌠sobφ nßm to sφce istΘ ΦasovΘ zdr₧anie, avÜak inej mo₧nosti v s·Φasnosti nemßme.
Najsk⌠r si pripravme HTML dokument na prßcu so Üt²lmi. Medzi tagy HEAD vlo₧φme nasledovn· deklßraciu Üt²lu, id="moj_styl".
<style id="moj_styl" type="text/css">
(Preddefinicia CSS)
</style>
JavaScript v tomto prφpade pou₧ijeme ako ak²si most na prenesenie CSS formßtovania na nßÜ HTML dokument. Ako si ukß₧eme v nasledovnom prφklade, r⌠zna implentßcia DOMu v tomto prφpade nabude pre nßs prekß₧kou, preto₧e si k≤d upravφme pre aplikovanie v oboch spomφnan²ch browseroch, teda v MS IE aj v Netscape.
<script language="javascript1.2">
if (document.all) {
// Kaskßdov² Üt²l podporovan² MS Internet explorerom ...
} else if (document.layers) {
// Kaskßdov² Üt²l podporovan² Netscape Communikßtorom ...
}
</script>
Teraz si sk·sme pomocou JavaScriptu aplikova¥ t·to "preddefinφciu" na ostro a deklarova¥ formßtovanie naprφklad tagu <p>.
VÜetky odseky formßtovanΘ pomocou tagu <p> si vyfarbime na modro.
<script language="JavaScript1.2">
if (document.all) {
document.styleSheets["moj_styl"].addRule
("P", "color: } else if (document.layers) {
document.tags.p.color="}
</script>
Ako sami vidφte rozdielna deklarßcia CSS pre MS IE a Netscape Communicator je pomocou JavaScriptu o nieΦo zlo₧itejÜia, ale efekt mßte zaruΦen². V tomto prφpade sa nßm nem⌠₧e sta¥, ₧e strßnka sa inak zobrazφ v IE a inak v NC. Chce to vÜak trochu viac trpezlivosti a prßce, ale urΦite to bude stߥ za to.
|
|
|
Homepage
