CSS变量不起作用/工作很奇怪

Question

我已经创建了一个模仿复选框输入的按钮，并在点击时编写了一些js代码：

1. 通过更改我在样式表中为其背景颜色设置的css变量来更改其背景颜色。
2. 将另一个变量（--checked）更改为值1.
   如果再次单击它，则会恢复背景颜色并将（--checked）设置为0。 我在代码中遇到了各种奇怪的问题，并且我以某种方式使它工作。

以下是代码：

$

这是HTML代码：

function taskDone(nodelistindex) { thisElement = document.getElementsByClassName('tb_checkbutton')[nodelistindex]; readStyle = getComputedStyle(thisElement); vvalue = readStyle.getPropertyValue('--checked'); console.log(vvalue + " (before)"); if (readStyle.getPropertyValue("--checked") == 0) { console.log(vvalue + " in if"); // thisElement.style.setProperty("--checked",1); thisElement.style = "background-color:green;"; thisElement.style.setProperty("--checked",1); } else { console.log(vvalue + " in else"); thisElement.style.setProperty("--checked",0); thisElement.style = "background-color:var(--tcolorvalue);"; } console.log(vvalue+" (after)"); }

以上代码为我提出了这些问题：

1. --checked的值将更改为＆＃39; 1＆＃39;在if语句中，它不会更改为＆＃39; 1＆＃39;但改为＆＃39; 1＆＃39;当函数下次运行时，我试图在点击后在chrome控制台中手动获取--checked的值，但是--clicked仍然返回＆＃39; 0＆＃39; 0直到再次点击它。
2. 同样的问题出现在我所做的else语句中 - 检查改为＆＃39; 0＆＃39;。这是我点击3次后的Chrome控制台日志。

<button style="--tcolorvalue:#CBCBCB; --checked:0" class="tb_checkbutton" onclick="taskDone(0)">

1. 如果我在第9行发表评论并且取消评论＆＃39;第11行，控制台日志告诉我这个。

0 (before) 0 in if 0 (after) 1 (before) 1 in else 1 (after) 0 (before) 0 in if 0 (after) 为什么？

感觉CSS变量几乎完全被我破坏了，我一直试图解决问题，每次编辑它时，都会给我带来更多问题。如何修改代码以使其稳定？

这是我期待的控制台日志：

0 (before)
    0 in if
    0 (after)
      (before)
      in else
      (after)
      (before)
      in if
      (after)