JQ、JS、模块化页面动态赋值CSS变量var（--xxx）

使用 CSS 变量可更加方便的批量修改CSS属性值 ， 如：批量更改主题颜色等。

案例：一个留言表单页面，分为访客端（为静态页面）与客服端（为layui 模块化加载页面【管理系统】），

第一步：客服端设置主题颜色，并可预览对应页面效果

第二步：访客端页面，访问时直接获取主题颜色并布局展示

访客端写法

:root {
    --color:#0C66FF;
}//定义一个全局变量 并设置默认主题颜色

.headBox,
.titleBox {
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	line-height: 60px;
	background-color: var(--color);  //可更改主题颜色处 引用变量  此处不一一列举 
}

$(':root').css('--color', model.themecolor || '#0C66FF');
//获取主题颜色  动态赋值即可

 客服端 写法

因该页面为动态模块化加载的页面  不建议使用：root 设置全局变量 且使用jq修改变量值也不生效

建议：使用模块页面最外层样式类名 创建变量

.workorderPlug-in {
    --color: #0C66FF;//创建 默认主题颜色 变量
}

//并在需更改颜色的样式上  引用该变量即可var(--color)

let dom = document.querySelector('.workorderPlug-in');
dom.style.setProperty('--color', color);
//使用原生js更改变量值 就可生效

JavaScript 检测浏览器支持

const isSupported =
  window.css &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

JavaScript 操作css变量

读取变量的值：

const dom = document.querySelector('selector');
dom.style.getPropertyValue('--color');

修改css变量的值：

const dom = document.querySelector('selector');
dom.style.setProperty('--color', 'white');