Laboratoare tehnici web - 9 Javascript

Laboratorul 9

(Deadline: -)

Daca nu sunteti logati exercitiile nu se mai afiseaza.

CSS DOM

In acest laborator vom invata despre obiectele dom specifice CSS-ului. Stilul se poate schimba in mod dinamic in mai multe feluri. Cel mai "primitiv" mod in care putem adauga dinamic reguli noi de css intr-un fisier html, e sa cream un obiect de tip style in care sa adaugam un textNode cu o regula css cum se poate vedea in exemplu: <!DOCTYPE html> <html> <head> </head> <body> <script type="text/javascript"> var stilDinam=document.createElement("style"); stilDinam.type="text/css"; var regulacss=document.createTextNode("p{color:blue}"); stilDinam.appendChild(regulacss); document.head.appendChild(stilDinam); </script> <p>oac oac</p> <p>miau miau</p> <p>mac mac</p> <p>bau bau</p> </body> </html>

Obiectul Style

Obiectul Style este o proprietate a obiectelor DOM. Prin intermediul acestuia putem accesa si schimba in mod dinamic stilul css inline al elementelor. Proprietatile lui corespund proprietatilor css acceptate de catre browser. Numele proprietatilor provin din css in felul urmator:

proprietatile simple (cu nume care nu contine liniuta, precum color, width, height) isi pastreaza denumirea in mod identic, fiind formate doar din litere mici;
subproprietatile care deriva din proprietati compuse (si care au in denumire o liniuta, precum border-left-color, font-size, text-indent) vor avea numele format din fiecare cuvant ce compune numele subproprietatii, insa de la al doilea cuvant incolo in cadrul numelui vor incepe cu initiala mare (practic orice litera de forma -l devine litera mare), astfel vom avea: borderLeftColor, fontSize, textIndent.
proprietatile cu prefix de layout engine urmeaza regula de mai sus, in sensul ca orice litera precedata de minus ("-") devine litera mare.

De exemplu:


<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div id="d1" style="width:100px;height:100px;background-color:blue;-moz-transform:rotate(40deg)"></div>

<br>

<br>

<br>

<script type="text/javascript">

var divuletz=document.getElementById("d1");

document.write("divuletz.style.width="+divuletz.style.width+" divuletz.style.height="+divuletz.style.height+"<br>");

document.write("divuletz.style.backgroundColor="+divuletz.style.backgroundColor+"<br>");

document.write("divuletz.style.MozTransform="+divuletz.style.MozTransform+"<br>");

</script>

</body>

</html>

Care prin intermediul afisarilor date de document.write va scrie pe ecran: divuletz.style.width=100px divuletz.style.height=100px divuletz.style.backgroundColor=blue divuletz.style.MozTransform=rotate(40deg)

Atentie, in proprietatea style nu se pot vedea si proprietatile dobandite din regulile de css introduse cu ajutorul foilor de stil, asa cum se poate observa in exemplul urmator: <!DOCTYPE html> <html> <head> <style type="text/css"> div#d1{ font-size:30px; color:yellow; } </style> </head> <body> <div id="d1" style="width:100px;height:100px;background-color:blue;-moz-transform:rotate(40deg)">bla</div> <br><br><br> <script type="text/javascript"> var divuletz=document.getElementById("d1"); //observati ca proprietatile de mai jos vor fi nule document.write("divuletz.style.fontSize="+divuletz.style.fontSize+"<br>divuletz.style.color="+divuletz.style.color+"<br>"); </script> </body> </html> va scrie pe ecran: divuletz.style.fontSize= divuletz.style.color=

Proprietatea styleSheets a documentului

Regulile CSS se pot schimba dinamic prin javascript. Daca vrem sa accesam foile de stil ale unui document putem folosi proprietatea styleSheets a obiectului document: document.styleSheets. Aceasta este un obiect de tipul StyleSheetList si reprezinta o lista cu toate foile de stil (obiecte de tip CSSStyleSheet) incluse in pagina.

De exemplu:


<!DOCTYPE html>

<html>

<head>

</head>

<body>

<script type="text/javascript">

document.write(document.styleSheets+"<br>");

document.write(document.styleSheets.length);

</script>



</body>

</html>

Va afisa o pagina cu textul:

[object StyleSheetList] 0

Aici lungimea a fost 0, deoarece nu e niciun stil inclus.

Dar daca includem o foaie de stil direct in pagina, si una externa, cum se vede in urmatorul exemplu: <!DOCTYPE html> <html> <head> <style type="text/css"> p{color:blue} </style> <link rel="stylesheet" type="text/css" href="stil.css"> </head> <body> <script type="text/javascript"> document.write(document.styleSheets+"<br>"); document.write(document.styleSheets.length); </script> </body> </html>

Va afisa:

[object StyleSheetList] 2

Atentie, de afisat va afisa acest lucru, chiar daca fisierul stil.css nu exista

Un obiect de tip CSSStyleSheet reprezinta un fisier sau o zona de css definita in tagul style in interiorul unui document HTML. Pentru a-i exemplifica proprietatile vom vedea urmatorul exemplu:


<!DOCTYPE html>

<html>

<head>

<style type="text/css">

p{

color:blue;

}

ul{background-color:yellow;

list-style-type:square;

}

li{

color:red;

font-weight:bold;

}

</style>

<link rel="stylesheet" type="text/css" href="stil.css">

</head>

<body>

<ul>

    <li>miau</li>

    <li>cip</li>

    <li>chit</li>

</ul>

<script type="text/javascript">

document.write(document.styleSheets[0]+"<br>");

document.write("Prima foaie de stil e intr-un element de tip style:<br>");

var nod_cont=document.styleSheets[0].ownerNode?document.styleSheets[0].ownerNode:document.styleSheets[0].owningElement;

document.write(nod_cont+"<br>");

document.write("A doua foaie de stil e intr-un element de tip link:<br>");

nod_cont=document.styleSheets[1].ownerNode?document.styleSheets[1].ownerNode:document.styleSheets[1].owningElement;

document.write(nod_cont+"<br>");

//putem accesa regulile:

var reguliCSS=document.styleSheets[0].cssRules?document.styleSheets[0].cssRules:document.styleSheets[0].rules;

document.write("reguliCSS: "+ reguliCSS+"<br>");

document.write("nr_reguli: "+ reguliCSS.length+"<br>");

reguliCSS=document.styleSheets[1].cssRules?document.styleSheets[1].cssRules:document.styleSheets[1].rules;

</script>

</body>

</html>

Apelurile document.write vor afisa urmatorul text: [object CSSStyleSheet] Prima foaie de stil e intr-un element de tip style: [object HTMLStyleElement] A doua foaie de stil e intr-un element de tip link: [object HTMLLinkElement] reguliCSS: [object CSSRuleList] nr_reguli: 3

Atentie, daca dorim sa afisam si informatii despre regulile din fisierul stil.css, in cazul in care acesta nu exista, vom primi o eroare de javascript.

O foaie de stil poate fi si dezactivata prin intermediul proprietatii disabled:


<!DOCTYPE html>

<html>

<head>

<style type="text/css">

p{

color:blue;

}

</style>

<style type="text/css">

p{

color:red;

}

</style>

</head>

<body>

<script type="text/javascript">

document.styleSheets[1].disabled=true;

</script>

<p>paragraf</p>

</body>

</html>

In exemplu de mai sus, deoarece regula cu culoarea rosie pentru paragrafe e cea mai jos definita, ea ar fi cea aplicata daca nu ar exista codul javascript. Insa prin acel cod am dezactivat a doua foaie de stil, prin urmare se aplica prima regula si paragraful va fi afisat albastru.

CSSStyleRule

Obiectele de tip CSSStyleRule se refera la un bloc de proprietati precedate de un selector. Din javascript poate fi accesat si modificat atat selectorul, cat si proprietatile efective. Obiectele de tip CSSStyleRule pot fi accesate din lista de reguli a unui CSSStyleSheet.

In exemplul de mai jos se poate observa folosirea catorva proprietati ale obiectelor de tip CSSStyleRule:


<!DOCTYPE html>

<html>

<head>

<style type="text/css">

p{

color:blue;

font-weight:bold;

text-indent:10px;

}

ul li

{

background-color:yellow;

list-style-type:square;

}



</style>

<link rel="stylesheet" type="text/css" href="stil.css">

</head>

<body>

<script type="text/javascript">

var reguliCSS=document.styleSheets[0].cssRules?document.styleSheets[0].cssRules:document.styleSheets[0].rules;

document.write(reguliCSS[0]+"<br>");

document.write("Textul complet al primei reguli:<br>");

document.write(reguliCSS[0].cssText+"<br>");

document.write("Doar selectorul: "+reguliCSS[0].selectorText+"<br>");

document.write("Doar selectorul pentru a doua regula: "+reguliCSS[1].selectorText+"<br>");

document.write("NumarProprietati: "+reguliCSS[0].style.length+"<br>");

document.write("Doar proprietatile css alocate selectorului: "+reguliCSS[0].style.cssText+"<br>");

document.write("----------<br>Iterare prin proprietati:<br>");

for (var i=0;i<reguliCSS[0].style.length; i++)

    { 

    document.write("Proprietatea "+i+":");

    document.write("<i>"+reguliCSS[0].style[i]+"</i> ");

    document.write("cu valoarea: <i>");

    document.write(reguliCSS[0].style.getPropertyValue(reguliCSS[0].style[i])+"</i><br>");    

    }

</script>

</body>

</html>

Apelurile document.write de mai sus vor afisa in pagina: [object CSSStyleRule] Textul complet al primei reguli: p { color: blue; text-indent: 10px; font-weight: bold; } Doar selectorul: p Doar selectorul pentru a doua regula: ul li NumarProprietati: 3 Doar proprietatile css alocate selectorului: color: blue; text-indent: 10px; font-weight: bold; ---------- Iterare prin proprietati: Proprietatea 0:color cu valoarea: blue Proprietatea 1:text-indent cu valoarea: 10px Proprietatea 2:font-weight cu valoarea: bold

Manipularea regulilor css

Exista metode speciale prin care putem adauga sau sterge reguli css dintr-un stylesheet, in mod dinamic.


<!DOCTYPE html>

<html>

<head>

<style type="text/css">

p {

font-weight:bold;

text-indent:10px;

color:blue;

}



ul li

{

background-color:yellow;

list-style-type:square;

}

</style>

</head>

<body>

<script type="text/javascript">

var stil=document.styleSheets[0];

var reguliCSS=stil.cssRules?stil.cssRules:stil.rules;



//adaugam o regula la sfarsit (de aceea folosim indexul stil.length)

if(stil.addRule){

    stil.addRule("p","color:red; font-style:italic;",reguliCSS.length);

}

else if(stil.insertRule){

    stil.insertRule("p { color:red; font-style:italic; }",reguliCSS.length);

}



function sterge_reg(){

    if(reguliCSS.length>0)

        stil.deleteRule(0);

    alert("Au ramas "+reguliCSS.length+" reguli");

}

</script>

<p>Un paragraf</p>

<p>Un paragraf</p>



<ul>

<li>elem lista 1</li>

<li>elem lista 2</li>

<li>elem lista 3</li>

</ul>

<button onclick="sterge_reg()">Sterge reguli</button>

</body>

</html>

Metoda getComputedStyle

Cand dorim sa aflam cu exacticate care va fi stilul CSS aplicat unui anumit element din pagina, fara a parcurge toate regulile CSS referitoare la acesta, putem folosi metoda window.getComputedStyle. Obiectul returnat de aceasta va avea ca proprietati efectiv toate proprietatile CSS acceptate de browserul curent.

Exemplul exemplu_js_window_getcomputedstyle.html


<!DOCTYPE html>

<html>

<head>

<style type="text/css">

ul li

{

background-color:yellow;

color:pink;

list-style-type:square;

}



li{

color:blue;

}



li#test_li{

list-style-type:circle;

}



</style>

</head>

<body>

<ul>

<li id="test_li">elem lista 1</li>

<li>elem lista 2</li>

<li>elem lista 3</li>

</ul>

<script type="text/javascript">

var stil=window.getComputedStyle(document.getElementById("test_li"));

document.write(stil+"<br>");

document.write("culoare element lista: "+ stil.color+"<br>");

document.write("tip bullet element lista: "+ stil.listStyleType);

</script>

</body>

</html>

Tehnici Web