CSS变量异常：模拟复选框按钮的JS逻辑故障排查与修复

嘿，我来帮你搞定这个问题！你的核心问题出在几个容易忽略的小细节上，咱们一步步捋清楚并修复：

问题根源拆解 #

1. 变量未实时更新：你只在函数开头获取了一次--checked的值，后续修改变量后没有重新读取，导致console.log输出的始终是旧值。
2. 直接赋值style属性会覆盖所有内联样式：当你写thisElement.style = "background-color:green;"时，会清空原本内联的--tcolorvalue和--checked变量，后续读取和使用这些变量时自然会出问题。
3. getComputedStyle的延迟性：它获取的是浏览器计算后的最终样式，不如直接读取元素内联style中的变量及时准确，毕竟你的--checked是直接设置在元素内联样式里的。

修改后的代码 #

优化版JS代码

function taskDone(nodelistindex) {
  // 用const声明变量，避免全局污染
  const thisElement = document.getElementsByClassName('tb_checkbutton')[nodelistindex];
  // 直接读取内联样式的--checked，转成数字避免字符串比较问题
  let checkedValue = parseInt(thisElement.style.getPropertyValue('--checked'));
  console.log(checkedValue + " (before)");

  if (checkedValue === 0) {
    console.log(checkedValue + " in if");
    // 用setProperty逐个设置样式，不覆盖原有内联变量
    thisElement.style.setProperty('background-color', 'green');
    thisElement.style.setProperty('--checked', 1);
    checkedValue = 1; // 手动更新变量，保证日志输出最新值
  } else {
    console.log(checkedValue + " in else");
    thisElement.style.setProperty('--checked', 0);
    thisElement.style.setProperty('background-color', 'var(--tcolorvalue)');
    checkedValue = 0; // 手动更新变量
  }
  console.log(checkedValue + " (after)");
}

可选的HTML优化（更健壮）

如果你的页面有多个复选框按钮，依赖索引传递参数容易出错，建议直接传递元素本身：

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

对应的JS修改成：

function taskDone(thisElement) {
  let checkedValue = parseInt(thisElement.style.getPropertyValue('--checked'));
  console.log(checkedValue + " (before)");

  if (checkedValue === 0) {
    console.log(checkedValue + " in if");
    thisElement.style.setProperty('background-color', 'green');
    thisElement.style.setProperty('--checked', 1);
    checkedValue = 1;
  } else {
    console.log(checkedValue + " in else");
    thisElement.style.setProperty('--checked', 0);
    thisElement.style.setProperty('background-color', 'var(--tcolorvalue)');
    checkedValue = 0;
  }
  console.log(checkedValue + " (after)");
}

效果验证 #

修改后点击按钮，控制台日志会完全符合你的预期：

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

内容的提问来源于stack exchange，提问作者Drunk Illuminati