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

问题描述

我有以下代码用于更新名为 --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 语句做一些不可能的事情。

有人可以告诉我那是什么以及如何使它工作吗？

标签： javascript

您的代码中的问题（我认为）是当您使用

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

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

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

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

问题描述

解决方案

推荐阅读