Erre a kérdésre nincs egységes válasz, mivel a két nyelv eltérő módon közelíti meg a változók hozzárendelését és manipulálását. Általánosságban elmondható, hogy a CSS-változók JavaScript segítségével történő megváltoztatásának egyik problémája az, hogy a két nyelv eltérő szintaxist használ a változók deklarálására és elérésére. Ezenkívül a CSS-változók általában stíluslap-szinten vannak meghatározva, nem pedig az egyes elemek szintjén, ami megnehezítheti a JavaScript-kódon belüli elérését.
var element = document.getElementById("element");
element.style.setProperty("--variable", "new-value");
Ez a kódsor új értéket állít be egy CSS-változóhoz. Az első sor az „elem” azonosítójú elemet kapja. A második sor a „–variable” CSS-változó értékét „new-value”-re állítja.
CSS-változók
A CSS-változók nagyszerű lehetőséget kínálnak az adatok CSS-fájljaiban való tárolására anélkül, hogy globális változókat kellene használni. Használhatja őket olyan információk tárolására, mint az aktuális oldal szélessége vagy magassága, vagy az aktuális betűméret.
Ha CSS-változót szeretne használni a JavaScript-kódban, először fel kell vennie a css tulajdonságot a dokumentum stíluslapjába. Ezután definiálhatja a változót a var kulcsszó használatával:
var width = document.getElementById(“saját elem”).offsetWidth;
Használhatja a css tulajdonságot egy változó egyedi értékeinek eléréséhez is:
var width = document.getElementById(“saját elem”).offsetWidth; var magasság = document.getElementById(“saját elem”).offsetHeight;
CSS vezérlése
A JavaScriptben néhány mód van a CSS szabályozására. Az egyik módja a css tulajdonság használata. Ezzel a tulajdonsággal beállíthatja a stílust a dokumentum egy adott eleméhez.
A CSS szabályozásának másik módja a style tulajdonság használata. Ez a tulajdonság lehetővé teszi a stílus beállítását a dokumentum összes eleméhez.
