Descriere: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.
Download:
Autor:
Sursa (Link-ul oficial): Propria parere:Nu l-am incercat.
Tutorialul:
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.
Cod: Selectaţi tot
<div id="id_div" style="border:2px solid #080808;" onclick="f_ex1(this.id)">Tutoriale JavaScript - www.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>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.
Cod: Selectaţi tot
// 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
}Iata un exemplu simplu (explicatiile necesare sunt in cod).
Cod: Selectaţi tot
<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>