文章目录

前言一、设置CSS变量？二、读取变量三、删除变量总结

---

前言

主要讲js 中对于 css 的变量操作；

前端框架：antd框架

一、设置CSS变量？

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

二、读取变量

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

三、删除变量

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

总结

新建一个.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; // 搜索框文字颜色}

设置–brand-primary变量颜色

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

使用–brand-primary变量颜色

color: var(--brand-primary);