Hlavná stránka · Diskusné Fórum · Pracovné príležitosti · Zoznam

 Main Menu
o Hlavná stránka
o Zoznam tém
o Zoznam
o Odporučte nás
o Užívatelia
o Vaše konto
o Pridaj článok
o Štatistiky
o Top 10

 Reklama


 Developer Zone's
o Internet
o Tools
o Linux
o CGI Zone
o ASP Zone
o ASP.net
o PHP Zone
o CSS Zone
o JavaScript
o MySQL
o WAP / WML
o WML / WMLScript
o XML / XHTML
o Tipy a triky
o Best of web
o WebServers
o WebDesign
o Grafika

 Servis
o Vyhľadávanie
o Fórum
o Workoffice
o Zoznam článkov
o Reklama
o Pridaj článok
o Pridaj novinku

Napíšte nám
Homepage Do favoritov

 LinkExpres
Interval.cz · Pc.sk
Builder.cz · Mobilmania
PCSvet.cz · Asp.cz
Webdnes · Živě.sk
Zoznam.sk · Atlas.sk
Inzine.sk · PHP.sk
Agent.sk · Lupa.cz
Code.box.sk · Root.cz
Pixel32 · Grafika.cz

 forum.developer.sk
o Fórum ::
o Markup languages
o Scriptové jazyky
o CGI
o PHP/MySQL
o Perl
o Grafika
o Webservery
o HTML Editory
o Browsery
o Bookmarx
o ASP
o Vytvor tému ::

 Pracovné príležitosti
o Ponúkate prácu?
o Hľadáte prácu?

 Autori developer.sk
o Martin Nemeček
o Sväťo Straka
o Jany Masaryk
o Jozef Murín

 
CSS [ 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.

 
 Príslušné odkazy k téme
Viac o téme: CSS | Iné články od: Admin | Pošli komentár | Stránka vhodná na tlač width=15 height=11  Pošli tento článok priateľovi, známemu width=15 height=11


Najčítanejšie články CSS:
CSS - Cascading Style Sheets [úvod do problematiky]

Ďalšie články v rubrike CSS:

 

"CSS a JavaScript [8.časť seriálu o CSS]" | Login / vytvor konto | 0 Komentárov
Prah
Za obsah komentárov je zodpovedný užívateľ, nie prevádzkovateľ týchto stránok.



Autorské práva:   ©1999 - 2001 Developer Zone [developer@developer.sk]

Všetky články sú vlastníctvom autorov Developer Zone. Všetky práva vyhradené. Stránky Developer.sk sú vytvorené pomocou PHP-Nuke.
Odkazy na nové články je možné preberať pomocou:Backend.php.