Pe langa lucrul cu numere, siruri, tag-uri HTML si imagini, JavaScript poate sa manipuleze si valorile stilurilor CSS (Cascading Style Sheets) ale elementelor din pagina.

1. Adaugarea si modificarea proprietatilor CSS

Adaugarea sau modificarea valorii unei proprietati CSS cu JavaScript se face cu metoda "style", dupa urmatoarea sintaxa:
            element.style.proprietateCss = 'valoare'
- "element" este elementul din pagina preluat in JavaScript (de exemplu un tag: document.getElementById('id_tag'))
- "proprietateCss" este proriettatea CSS la care se face referire (de exemplu: width, color, marginTop)
- "valoare" este valoarea CSS atribuita propritatii respective

Iata cateva exemple aplicate unui cadru HTML, ce are codul:
            <div id="id_div">Text oarecare</div>
1. Setarea lungimii div-ului la "200px". Proprietatea CSS "width: 200px;" se obtine in JavaScript cu formula:
            document.getElementById('id_div').style.width = '200px';
2. Ascunderea cadrului in pagina. Proprietatea CSS "display: none;" se obtine in JS cu formula:
            document.getElementById('id_div').style.display = 'none';
3. Adaugarea unui chenar de culoare albastra. Proprietatea CSS "border: 2px solid blue;", in JavaScript:
            document.getElementById('id_div').style.border = '2px solid blue';
4. Setarea marimii textului din cadru. Proprietatea CSS "font-size: 15px;" se obtine in JavaScript cu:
            document.getElementById('id_div').style.fontSize = '15px';


Observati ca in JavaScript se pastreaza aceeasi denumire si valoare a proprietatii cu cea din CSS, o diferenta fiind la proprietatile formate din 2 cuvinte. In acest caz, in CSS cuvintele sunt separate prin liniuta (-), iar in JS se elimina liniuta si se scrie al doilea cuvant in continuarea celui dintai, dar cu primul caracter majuscula (litera mare).
Astfel, "margin-left" din CSS, in JS este "marginLeft", "padding-top" se aplica "paddingTop", si tot asa pentru alte proprietati.

Iata si un exemplu practic in care se vede modul de lucru cu proprietatile CSS in JavaScript.
<div id="id_div" style="border:2px solid #080808;" onclick="f_ex1(this.id)">Tutoriale JavaScript - marplo.net/javascript</div>

<script type="text/javascript"><!--
// Functia modifica stilurile CSS (border si background-color) a unui element
function f_ex1(id_e) {
    // Preia elementul dupa id-ul trsansmis la primul parametru
    var el = document.getElementById(id_e);

    // Adauga o culoare de gackground si schimba bordura
    el.style.backgroundColor = '#b8e8fe';
    el.style.border = '2px dashed blue';
}
//--></script>
- Cand se da click pe zona cadrului, este apelata functia "f_ex1()" care va schimpa proprietatile CSS ale div-ului, dupa cum puteti observa daca dati click pe textul de mai jos.

Tutoriale JavaScript - marplo.net/javascript

2. Preluarea valorilor CSS

Preluarea valorii unei proprietati CSS se face diferit in principalele browsere (Mozilla Firefox si Internet Explorer).
- O modalitate comuna de preluare a lungimii si inaltimii unui element din pagina este folosirea metodelor:
            element.offsetWidth (pt. lungime) si element.offsetHeight (pt. inaltime)
Pentru celelalte proprietati CSS, browserele au metode diferite:
Pentru Firefox se poate folosi sintaxa:
            document.defaultView.getComputedStyle(element, "")['proprietateCss']
Iar in IE:
            element.currentStyle['proprietateCss']

Sau puteti folosi functia urmatoaare, cuprinde ambele metode si functioneaza in Firefox, IE, Opera, si altele.

// Functia preia valoarea elementelor css (preluata si modificata de la www.javascriptkit.com)
function getStyle(el, cssprop){
    var val_css = '';         // Variabila cu valoarea CSS ce va fi returnata

    if(el.currentStyle) val_css = el.currentStyle[cssprop];         // Pentru browsere IE
    else if(document.defaultView && document.defaultView.getComputedStyle) val_css = document.defaultView.getComputedStyle(el, "")[cssprop];         // Pentru browsere Firefox
    else val_css = el.style[cssprop];

    return val_css;         // Returneaza valoarea
}
- Dupa ce includeti aceasta functie in script, se poate afla valoarea CSS a proprietatii unui element apeland functia: getStyle(element, proprietateCss)

Iata un exemplu simplu (explicatiile necesare sunt in cod).
<div id="div1" style="width:100px; height:100px; background-color:DodgerBlue">Cadrul 1</div>
<div id="div2" style="width:130px; height:100px; background-color:green">Cadrul 2</div>
<button onclick="f_ex2('div1', 'div2')">Click</button>

<script type="text/javascript"><!--
// Functia pt. preluarea valoarii css
function getStyle(el, cssprop){
    var val_css = '';         // Variabila cu valoarea CSS ce va fi returnata

    if(el.currentStyle) val_css = el.currentStyle[cssprop];         // Pentru browsere IE
    else if(document.defaultView && document.defaultView.getComputedStyle) val_css = document.defaultView.getComputedStyle(el, "")[cssprop];         // Pentru browsere Firefox
    else val_css = el.style[cssprop];

    return val_css;         // Returneaza valoarea
}

    // Functia care preia si schimba culorile elementelor intre ele
function f_ex2(id_e1, id_e2) {
    // Preia elementele dupa id-urile din parametri
    var el1 = document.getElementById(id_e1);
    var el2 = document.getElementById(id_e2);

    // Obtine culorile background ale celor 2 elemente si lungimea celui de-al doilea (cu functia "getStyle()")
    var bg_e1 = getStyle(el1, 'backgroundColor');
    var bg_e2 = getStyle(el2, 'backgroundColor');
    var l_e2 = getStyle(el2, 'width');

    // Seteaza primului element culoarea din al doilea si invers
    el1.style.backgroundColor = bg_e2;
    el2.style.backgroundColor = bg_e1;

    // Afiseaza ca text in cadrul elementului doi lungimea acestuia
    el2.innerHTML = 'Lungime - '+ l_e2;
}
//--></script>
- Acest script va afisa urmatorul rezultat. Cand se da click pe buton, este apelata functia "f_ex2()" care va schimba intre ele culorile de fundal ale celor doua cadre si va scrie in al doilea lungimea lui.
Cadrul 1
Cadrul 2


Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
Adaugare si preluare valori proprietati CSS

Last accessed pages

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (47118)
  2. Prezentul simplu - Exercitii si teste incepatori (17649)
  3. Verbe - Exercitii si teste engleza incepatori (8804)
  4. Exercitii engleza - English Tests and exercises - Grammar (25753)
  5. Gramatica limbii engleze - Prezentare Generala (101148)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (3160)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2346)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1783)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1367)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1307)