Adaugare si preluare valori proprietati CSS

Curs Javascript

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

Click

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

#id {
  overflow: auto;
}

document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}

if(isset($_GET["id"])) {
  echo $_GET["id"];
}

Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.

Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.