Det finns inget entydigt svar på denna fråga eftersom de två språken närmar sig variabeltilldelning och manipulation på olika sätt. Generellt sett är dock ett problem med att försöka ändra en CSS-variabel med JavaScript att de två språken använder olika syntaxer för att deklarera och komma åt variabler. Dessutom definieras CSS-variabler vanligtvis på stilmallsnivå snarare än på individuell elementnivå, vilket kan göra dem svåra att komma åt inifrån JavaScript-koden.
var element = document.getElementById("element");
element.style.setProperty("--variable", "new-value");
Den här kodraden ställer in ett nytt värde för en CSS-variabel. Den första raden får elementet med ID:t för "element". Den andra raden ställer in värdet på CSS-variabeln "–variable" till "nytt-värde".
CSS-variabler
CSS-variabler är ett utmärkt sätt att lagra data i dina CSS-filer utan att behöva använda globala variabler. Du kan använda dem för att lagra information som den aktuella sidans bredd eller höjd, eller den aktuella teckenstorleken.
För att använda en CSS-variabel i din JavaScript-kod måste du först inkludera egenskapen css i dokumentets formatmall. Sedan kan du definiera variabeln med nyckelordet var:
var width = document.getElementById(“myElement”).offsetWidth;
Du kan också använda egenskapen css för att komma åt enskilda värden från en variabel:
var width = document.getElementById(“myElement”).offsetWidth; var height = document.getElementById(“myElement”).offsetHeight;
Styr CSS
I JavaScript finns det några sätt att styra CSS. Ett sätt är att använda egenskapen css. Den här egenskapen låter dig ställa in stilen för ett specifikt element i ditt dokument.
Ett annat sätt att styra CSS är att använda stilegenskapen. Den här egenskapen låter dig ställa in stilen för alla element i ditt dokument.
