JS 修改 CSS 变量背景工作中遇到一个需求，用户可以点击一个按钮，切换展示产品的市场价与分销价，两个价格用不同颜色

背景

工作中遇到一个需求，用户可以点击一个按钮，切换展示产品的市场价与分销价，两个价格用不同颜色表示。下面是动态改变 CSS 样式的实现方案。

依赖 api

获取 CSS 变量的值 getPropertyValue
设置 CSS 变量的值 setProperty

例子

<span class="price">$100</span>

/* 定义颜色变量 */
:root{
    --money-color: red;
}

.price{
    color: var(--money-color);
}

function moneyColorChange(){
    const root = document.querySelector(':root');
    // 获取 :root 上 --money-color 变量的值
    const color = getComputedStyle(root).getPropertyValue('--money-color').trim();
    // 设置 :root 上 --money-color 变量的值
    root.style.setProperty('--money-color', color === 'red' ? 'blue' : 'red');
}