javascript - 为什么我的基于 getCompulatedStyle 的语句没有运行？

Question

我有以下代码，用于更新名为 --changeColor 的 css 变量

const r = document.querySelector(':root');
const currentColor = getComputedStyle(r).getPropertyValue('--changeColor');
console.log(currentColor) //logs #2c988b

function newColor() {

    console.log(currentColor) //logs #2c988b
    
    if (currentColor === '#2c988b') {
        r.style.setProperty('--changeColor', '#000000');        
    }
}

问题是 if 语句中的代码似乎没有按照我想象的那样运行。如果条件更改为 1 < 2 并且我在控制台中调用该函数，则执行该语句内的代码。所以我的结论是，我正在尝试使用 if 语句进行一些不可能的操作。

有人可以告诉我那是什么以及如何让它发挥作用吗？

Answer 1

你的代码中的问题(我认为)是当你使用

获取CSS变量时

const currentColor = getComputedStyle(r).getPropertyValue("--changeColor");

保留变量周围的空格。因此，在与字符串进行比较之前，您应该 trim () currentColor。尝试以下方法是否有效:

https://stackblitz.com/edit/js-acyb8x