Descrierea stilurilor de formatare utilizand JavaScript

Descrierea stilurilor de formatare utilizand JavaScript

Descrierea stilurilor de formatare a elementelor unui document HTML se poate realiza si cu JavaScript, prin intermediul obiectelor Netscape. De data aceasta vom interpreta o pagina Web ca un obiect, cu proprietati care pot fi modificate. Proprietatea tags a obiectului document permite accesul la elementele documentului HIML. De exemplu, pentru a stabili culoarea rosie pentru toate paragrafele titlu de nivel 1 putem scrie in JavaScript: document. tags. Hl. color = ' red'.

Sa consideram un exemplu de definire a unui stil pentru toate paragrafele unui document (text aliniat centrat, cu marginile din dreapta si din stanga egale cu 10% din latimea zonei de vizualizare), pentru toate paragrafele titlu de nivel 4 (text de culoare verde, subliniat) si de nivel 5 (text scris cu majuscule, dintr-un chenar cu linie rosie, cu grosime de 4 pt, pe o culoare de fundal galbena).

Descriere utilizand JavaScript:

<STYLE TYPE='text/javascript'>

with (tags.P)

with (tags.H4)

with (tags.H3)

</STYLE>

Descriere utilizand CSS:

<STYLE TYPE='text/CSS'>

P

H4

H5

</STYLE>

Observatie

1) Descrierea stilurilor in JavaScript nu trebuie inclusa intre < ! - si ->, ca in cazul script-urilor.

2) Proprietatea tags intotdeauna se refera la documentul curent, deci poate fi omis document din specificarea proprietatii.

Specificarea unor clase de stiluri, corespunzatoare atributului HTML CIASS, se realizeaza in JavaScript prin intermediul proprietatii CLASSES, sintaxa fiind usor diferita de CSS.

De exemplu, sa descriem un stil de formatare pentru toate paragrafele din clasa Important (text rosu, inclinat).

Sintaxa JavaScript:

<STYLE TYPE= text/Javascript'>

classes.Important.P.fontStyle='italic';

classes.Important.P.color='red';

</STYLE>

Observatie

In numele clasei se face distinctie intre literele mari si mici (este case-sensitive}.

Sintaxa CSS:

<STYLE TYPE='text/CSS'> 

P.Important (font-style:italic; color:red;}

</STYLE>

Pentru a crea in JavaScript un stil de formatare individual, care sa fie aplicat numai elementelor care au atributul ID cu o valoare specificata, se utilizeaza proprietatea id.

Sa descriem de exemplu un stil de formatare pentru toate paragrafele din clasa General (text rosu, inclinat, ingrosat, cu dimensiunea caracterelor 24). Pentru paragraful cu atributul ID cu valoarea Particular, descriem un alt stil de formatare (text albastru).

Sintaxa JavaScript:

<STYLE TYPE='text/javascript'>  

with (classes.General.P)

ids.Particular.color= 'blue';

</STYLE>

Sintaxa CSS:

<STYLE TYPE='text/CSS'>

P.General

#Particular

</STYLE>

Chiar daca numele proprietatilor CSS si JavaScript sunt asemanatoare, ele nu coincid. in plus, limbajul JavaScript este case-sensitive (face distinctie intre literele mari si cele mici). Pentru o enumerare detaliata a proprietatilor consultati Client-Side JavaScript Reference.