如何在css中使用全局javascript变量？

// 定义全局变量
var globalColor = 'blue';

// 获取元素并设置样式
document.getElementById('myElement').style.color = globalColor;

/* 在CSS中定义变量 */
:root {
  --global-color: blue;
}

#myElement {
  color: var(--global-color);
}

// 修改全局变量的值
document.documentElement.style.setProperty('--global-color', 'red');

// 定义全局变量
var globalColor = 'blue';

// 创建style元素
var style = document.createElement('style');
style.type = 'text/css';

// 插入样式规则
if (style.styleSheet){
  style.styleSheet.cssText = '#myElement { color: ' + globalColor + '; }';
} else {
  style.appendChild(document.createTextNode('#myElement { color: ' + globalColor + '; }'));
}

// 添加到head元素
document.getElementsByTagName('head')[0].appendChild(style);

#myElement {
  color: blue; /* 回退值 */
  color: var(--global-color);
}

document.addEventListener('DOMContentLoaded', function() {
  // 你的代码
});