淘宝客网站开发上架,WordPress获取文章封页,网站建设 大公司,顺企网官网登录文章目录前言一、设置CSS变量#xff1f;二、读取变量三、删除变量总结前言
主要讲js 中对于 css 的变量操作#xff1b; 前端框架#xff1a;antd框架
一、设置CSS变量#xff1f;
document.body.style.setProperty(--primary, #7F583F’);二、读取变量
document.body…
文章目录前言一、设置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);