No hi ha una resposta única a aquesta pregunta, ja que els dos idiomes aborden l'assignació de variables i la manipulació de diferents maneres. En termes generals, però, un problema per intentar canviar una variable CSS amb JavaScript és que els dos idiomes utilitzen sintaxis diferents per declarar i accedir a variables. A més, les variables CSS normalment es defineixen al nivell del full d'estil en lloc del nivell d'element individual, cosa que pot dificultar l'accés a elles des del codi JavaScript.
var element = document.getElementById("element");
element.style.setProperty("--variable", "new-value");
Aquesta línia de codi està establint un valor nou per a una variable CSS. La primera línia obté l'element amb l'ID de "element". La segona línia estableix el valor de la variable CSS "–variable" a "nou-valor".
Variables CSS
Les variables CSS són una manera fantàstica d'emmagatzemar dades als fitxers CSS sense haver d'utilitzar variables globals. Podeu utilitzar-los per emmagatzemar informació com l'amplada o l'alçada de la pàgina actual o la mida de la lletra actual.
Per utilitzar una variable CSS al vostre codi JavaScript, primer heu d'incloure la propietat css al full d'estil del vostre document. A continuació, podeu definir la variable utilitzant la paraula clau var:
var width = document.getElementById(“el meuElement”).offsetWidth;
També podeu utilitzar la propietat css per accedir a valors individuals des d'una variable:
var width = document.getElementById(“el meuElement”).offsetWidth; var height = document.getElementById(“el meuElement”).offsetHeight;
Controlar CSS
A JavaScript, hi ha algunes maneres de controlar CSS. Una manera és utilitzar la propietat css. Aquesta propietat us permet establir l'estil per a un element específic del vostre document.
Una altra manera de controlar CSS és utilitzar la propietat style. Aquesta propietat us permet establir l'estil per a tots els elements del vostre document.
