Ne ekzistas ununura respondo al ĉi tiu demando ĉar la du lingvoj alproksimiĝas al varia tasko kaj manipulado en malsamaj manieroj. Ĝenerale, tamen, unu problemo kun provi ŝanĝi CSS-variablon per JavaScript estas ke la du lingvoj uzas malsamajn sintaksojn por deklari kaj aliri variablojn. Plie, CSS-variabloj estas tipe difinitaj ĉe la stilfolionivelo prefere ol sur la individua elementnivelo, kio povas malfaciligi ilin aliri de ene de JavaScript-kodo.
var element = document.getElementById("element");
element.style.setProperty("--variable", "new-value");
Ĉi tiu kodlinio fiksas novan valoron por CSS-variablo. La unua linio ricevas la elementon kun la ID de "elemento". La dua linio fiksas la valoron de la CSS-variablo "–variable" al "nova-valoro".
CSS-variabloj
CSS-variabloj estas bonega maniero konservi datumojn en viaj CSS-dosieroj sen devi uzi tutmondajn variablojn. Vi povas uzi ilin por konservi informojn kiel la larĝon aŭ altecon de la nuna paĝo aŭ la nunan tiparograndon.
Por uzi CSS-variablon en via JavaScript-kodo, vi unue devas inkluzivi la css-posedaĵon en la stilfolio de via dokumento. Tiam, vi povas difini la variablon uzante la var-ŝlosilvorton:
var width = document.getElementById(“miaElemento”).offsetWidth;
Vi ankaŭ povas uzi la css-posedaĵon por aliri individuajn valorojn de variablo:
var width = document.getElementById(“miaElemento”).offsetWidth; var alteco = document.getElementById(“miaElemento”).offsetHeight;
Kontrolu CSS
En JavaScript, estas kelkaj manieroj kontroli CSS. Unu maniero estas uzi la css-posedaĵon. Ĉi tiu posedaĵo permesas al vi agordi la stilon por specifa elemento en via dokumento.
Alia maniero kontroli CSS estas uzi la stilposedaĵon. Ĉi tiu posedaĵo permesas al vi agordi la stilon por ĉiuj elementoj en via dokumento.
