JavaScript? CSS ??? ?? ?? (CSS ??)? ?? ???? getComputedStyle () ? getProperTyValue ()? ?? ?? ?? ?? ?? setProperty ()? ???? ?? ?? ???? ? ? ????. ?? ??? ??? ????. 1. getComputedStyle (??)? ???? ?? ?? ???? GetProperTyValue ( '-variable-name')? ???? ???? ??? ???? ?? Trim ()? ???????. 2. element.style.setProperty ( '-variable-name', 'new-value')? ???? ??? ?? ???? ?? (Document.DocumentElement) ?? ?? ??? ?? ? ? ????. 3. ?????? ??? ???? ?? ??? ?? ? ? ??? ???? ??????? ???????. 4. ?? ? ?? ??? ??, ?? ? ?? ??????? ???????. ??? ??? ?? ???, ?? ???? ?? ?? ??? ??? ??? ? ????.

JavaScript? CSS ??? ?? ?? (CSS ????? ?)? ??? ?? ??? ? ????. ??? ???? ?? ??? ????. ????? DOM? ?? ??? ?? ??? ????? ? ???? ?????.

JavaScript?? CSS ??? ??????

getComputedStyle() ? getPropertyValue() ???? ???? CSS ??? ?? ?? ? ????. ??? ??? ?? ?? ?? ?? ?? ?????? ???? ?? ?? ?????.

?? ??:

 const root = document.documentElement;
const bgcolor = getComputedStyle (root) .getProperTyValue ( '-BG-Color');
console.log (bgcolor.trim ()); // ?? ??/?? ??? ???? ??

?? ?? ?? ??? ?? ? ??? ?? ??? ??? ? ? ????. ??? ?? ??? :root ??? ?????? ?? ??? ?????.

???? gotcha : getPropertyValue() ?? ??? ???? ?? ???? ??? ?? ??? ??? ?? ?? ????.

JavaScript? CSS ??? ???????

CSS ??? ?? ???? ?? setProperty() ???? ??? ???? ?? ? ?? ???? ?????. ??? ?? ??, ??? ??? ???? ???? ?? ? ?? UI ??? ?? ?????.

?:

 Document.DocumentElement.style.setProperty ( '-BG-Color', '#ff0000');

? ??? ? ????? --bg-color ??? ??????? ( :root ? ?????? ??). ?? ??? ???? ? ?? ????.

 document.querySelector ( '. box'). style.setProperty ( '-??? ??', '1.5rem');

??? ?? ??? ??? ????? ??? ???, ??? ?? ????? ???? ?? ? ?? ?? ????? ??? ????.

????? ?? ???? CSS ??? ?????

????? ???? ?? ?? ? ??? CSS ??? JavaScript? ???? ?? ?? ?????? ???? ??????. ?? ??, ?? ??? ???? ????? ??? ???? ??? ? ????.

???? ??? ? ??? ??? ??? ????.

 : ?? {
  -?? ?? : #007bff;
  ?? :-?? ?? 0.3S ??;
}

?? ?? JS?? :

 document.documentelement.style.setproperty ( '-?? ??', '#ff0000');

??? ???? ?? ?????? ????? ??????. ?? ????? CSS ??? ?? ??? ????? ???? ?? ???? . ??? ???? ???? ??? ?? ????? ?????? ??? ??????.

???? ?????? ??????

CSS ??? ?? CSS? ??? ?? ? ?? ??? ????. ??? ??? ??? ???? ?? ?????.

.theme-dark ??? ??? ???? ?? ??? ??? ? ?? ?? ??? ? ? ????. JavaScript? ?? ??? ? ? ??? ??? ????????.

?? ??? ?? ??? ?? ??? ?? ?? ??? --MainColor ? --maincolor ? ????.

??? JS? ?? ?? ? :

• ?? ??? ???? ??? ?? ? ? ??????.
• ?? ??? ??????.
• ???? ???? ??? ?? ???? ???? ?? DEV ??? ??????.

????? ?? ??.

? ??? JavaScript? CSS ??? ?? ??? ??? ?? ??? ? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!