文章目錄

• 前言
• 一、設置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);

總結

以上是生活随笔為你收集整理的js 中对于 css 的变量操作（React也可）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。