Nu există un răspuns unic la această întrebare, deoarece cele două limbi abordează atribuirea și manipularea variabilelor în moduri diferite. În general, totuși, o problemă cu încercarea de a schimba o variabilă CSS cu JavaScript este că cele două limbi folosesc sintaxe diferite pentru declararea și accesarea variabilelor. În plus, variabilele CSS sunt definite de obicei la nivelul foii de stil, mai degrabă decât la nivel de element individual, ceea ce le poate face dificil de accesat din codul JavaScript.
var element = document.getElementById("element");
element.style.setProperty("--variable", "new-value");
Această linie de cod setează o nouă valoare pentru o variabilă CSS. Prima linie primește elementul cu ID-ul „element”. A doua linie setează valoarea variabilei CSS „–variable” la „new-value”.
variabile CSS
Variabilele CSS sunt o modalitate excelentă de a stoca date în fișierele dvs. CSS fără a fi nevoie să utilizați variabile globale. Le puteți folosi pentru a stoca informații precum lățimea sau înălțimea paginii curente sau dimensiunea fontului curent.
Pentru a utiliza o variabilă CSS în codul JavaScript, mai întâi trebuie să includeți proprietatea css în foaia de stil a documentului. Apoi, puteți defini variabila folosind cuvântul cheie var:
var width = document.getElementById(“myElement”).offsetWidth;
De asemenea, puteți utiliza proprietatea css pentru a accesa valori individuale dintr-o variabilă:
var width = document.getElementById(“myElement”).offsetWidth; var height = document.getElementById(“myElement”).offsetHeight;
Controlați CSS
În JavaScript, există câteva moduri de a controla CSS. O modalitate este de a folosi proprietatea css. Această proprietate vă permite să setați stilul pentru un anumit element din documentul dvs.
O altă modalitate de a controla CSS este utilizarea proprietății style. Această proprietate vă permite să setați stilul pentru toate elementele din document.
