Išspręsta: kaip pakeisti css kintamąjį su javascript

Nėra vieno atsakymo į šį klausimą, nes abi kalbos skirtingai priskiria kintamuosius ir manipuliuoja. Tačiau bendrai kalbant, viena problema bandant pakeisti CSS kintamąjį naudojant „JavaScript“ yra ta, kad abi kalbos naudoja skirtingas sintakses kintamiesiems deklaruoti ir pasiekti. Be to, CSS kintamieji paprastai apibrėžiami stiliaus lapo lygiu, o ne atskirų elementų lygiu, todėl gali būti sunku juos pasiekti iš JavaScript kodo.

var element = document.getElementById("element");
element.style.setProperty("--variable", "new-value");

Ši kodo eilutė nustato naują CSS kintamojo reikšmę. Pirmoji eilutė gauna elementą su „elemento“ ID. Antroje eilutėje CSS kintamojo „–variable“ reikšmė nustatoma į „new-value“.

CSS kintamieji

CSS kintamieji yra puikus būdas saugoti duomenis CSS failuose nenaudojant visuotinių kintamųjų. Galite juos naudoti norėdami išsaugoti informaciją, pvz., dabartinio puslapio plotį ar aukštį arba esamą šrifto dydį.

Jei norite naudoti CSS kintamąjį „JavaScript“ kode, pirmiausia turite įtraukti css ypatybę į dokumento stiliaus lapą. Tada galite apibrėžti kintamąjį naudodami raktinį žodį var:

var plotis = document.getElementById("mano elementas").offsetWidth;

Taip pat galite naudoti css nuosavybę, kad pasiektumėte atskiras kintamojo vertes:

var plotis = document.getElementById("mano elementas").offsetWidth; var aukštis = document.getElementById("mano elementas").offsetHeight;

Valdykite CSS

„JavaScript“ yra keletas būdų, kaip valdyti CSS. Vienas iš būdų yra naudoti css nuosavybę. Ši savybė leidžia nustatyti konkretaus dokumento elemento stilių.

Kitas būdas valdyti CSS yra naudoti stiliaus ypatybę. Ši savybė leidžia nustatyti visų dokumento elementų stilių.

Susijusios naujienos:

Palikite komentarą