js 中对于 css 的变量操作（React也可）

---

前言

主要讲js 中对于 css 的变量操作；
前端框架：antd框架

一、设置CSS变量？

document.body.style.setProperty('--primary', '#7F583F’);

二、读取变量

document.body.style.getPropertyValue('--primary').trim();

三、删除变量

document.body.style.removeProperty('--primary');

总结

1. 新建一个.css文件，.css文件代码部分如下：

@primary-color: rgba(0, 203, 171, 1);
@brand-primary: rgba(0, 203, 171, 1);
@brand-primary-tap: rgba(0, 203, 171, 1);

// 辅助色 
@auxiliary-color: rgba(0, 203, 171, 0.5); // 加入购物车
// @auxiliary-color: rgba(0, 203, 171, 0.5); // 加入购物车

// 次要色
@hypochromy-color: #fff;

// 字体色
@text-color: #fff; //加入购物车

//背景色
@background-add: ''; //加入购物车的按钮渐变背景

@ghost-button-fill-tap: fade(@brand-primary, 60%);

:root {
  --brand-primary: @brand-primary; //color.less中加入css原生变量： --brand-primary //主要色
  --auxiliary-color: @auxiliary-color; // 辅助色
  --hypochromy-color: @hypochromy-color; //  次要色
  --text-color: @text-color ; // 加入购物车字体色
  --background-add: @background-add ; //加入购物车的按钮渐变背景
  --search-boxColor: #fff; // 搜索框体色
  --searchText-color: #ccc; // 搜索框文字颜色
}

2. 设置–brand-primary变量颜色

document.documentElement.style.setProperty("--brand-primary", Data.Maincolor !== null ? Data.Maincolor : 'rgba(0, 203, 171, 1)');

3. 使用–brand-primary变量颜色

 color: var(--brand-primary);