Pod ovim izrazom možemo smatrati primjenu atributa <STYLE>, ali ne na sve elemente neke klase ili objekta, več na jedan jedini elemenz npr. <H2 STYLE="color:blue;">. Sad možemo u IE putem JavaScripta modificirati definirani stil, a promjene če biti vidljive na ekranu istog momenta. Parametri koji su navedeni unutar STYLE atributa spadaju u CSS atribute, odnosno one atribute koji opisuju određeni style sheet u tekučem dokumentu. No, kada tim objektima pristupamo putem JavaScripta ti isti parametru nose drugačija imena definirana DOM-om, što i nije prevelik problem jer su poznati načini konstrukcije imena parametara. Npr. CSS atribut font-weight ima ime kada mu se pristupa kao STYLE objektu putem Java Scripta fontWeight. Princip je jasan, makni crticu i prvo slovo druge riječi uzeti kao veliko.
Primjer:
<P ID="selectrule"
ALIGN="left";
STYLE="color:blue;
font-weight:normal;">
Please select one item below.
</P>
Sad možemo npr. ukoliko korisnik ne ispuni ono što se od njega očekuje taj isti iskaz nagalasiti crvenim masno tiskanim slovima na sljedeči način:
document.all.selectrule.style.color="red"; document.all.selectrule.style.fontWeight="bold";
,i po potrebno vratiti natrag u početno stanje.
Možda bi bilo zgodno ovdje posebno naglasiti da ovim putem naš JavaScript kod mijenja Style objekt samo referenciranog elementa i nijednog drugog.
Iako se ovaj način promjene stila pojedinog elementa čini vrlo zgodnim, mi bi možda htjeli promjene koje bi vrijedile za sve elemente definirane nekim style sheetom. Tako bi svi elementi obuhvačeni ovako definiranim style sheetom doživili jednake promjene. Sljedi primjer jedne takve globalne definicije style sheeta koji če biti primjenjen na sve elemente <H3> i jeda opči podstil imena warning na sve elemente koji če koristiti tu klasu.
<STYLE ID="sheet1">
H3 {
color:blue;
font-family:"Arial";
font-size:large;
}
.warning {
color:red;
font-weight:bold;
font-style:italic;
}
</STYLE>
Svaka ovakva deinicija stila unutar Style taga naziva se rule, odnosno hrvatski pravilo.Tako redak koji definira stil za H3 je jedno pravilo, a drugi redak koji defira warning je drugo pravilo. U Microsoftovom Object modelu svakom style sheetu pristupamo preko styleSheets[] polja. Pod jednim style sheetom smatramo sve unutar <STYLE>
</STYLE> tagova. To znači da se u gornjem primjeru to smatra jednim style sheetom, a ukoliko je još i prvi unutar naše stranice pristupali bi mu na sljedeči način:
document.styleSheets[0];
Dalje možemo reči da ovo polje sadrži još onoliko elemenata koliko je definirano pravila unutar toga style sheeta, te im tako i pristupamo :
document.styleSheets[0].rules[0]; - H3 pravilo
document.styleSheets[0].rules[1]; - warning pravilo
Stvari postaju malo kompliciranije kada vam kažem da još i svako od definiranih pravila ima svoj STYLE objekt, i putem toga objekta utječemo na parametre pojedinog pravila, ili na primjeru:
document.styleSheets[0].rules[0].style.color="yellow";
ili,
Sa ova dva retka promijenili smo stanje STYLE objekta koji opisuje stil za H3 element, i to čak ona svojstva koja nisu bila niti definirana:
document.styleSheets[0].rules[0].style.fontStyle="italic";
Svaki od ovih izraza uzrokovat če promjene na svim elementima tipa H3 u dokumentu u kojem je definiran ovaj style sheet Slično mijenjajuči svojstva style objekta koji definira pravilo warning (npr. document. styleSheets[0].rules[1].style.property) če utjecati na sve elemente HTML dokumenta čiji tagovi sadrže atribut CLASS=" warning" npr.
. . Zgodno, zar ne? Vidimo da primjena ovakovih dinamičkih stilova omogučava efikasu promjenu izgleda stranice u vrlo kratkom vremenu.
