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

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

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

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

保留变量周围的空格。所以你应该在将它与字符串进行比较之前 trim() currentColor 。尝试以下操作是否有效:
https://stackblitz.com/edit/js-acyb8x