Question

我正在尝试建立一个包含多个按钮的页面，当任务完成时，所有按钮都从红色切换为绿色。但是，我希望他们能够在出现错误时切换回去。到目前为止，我具有以下功能：

  <button id="button">button</button>
  <script>
  function changeColor(button) {
      
        var thisButton = document.getElementById(button)

        if (thisButton.style.background == '#0f0') {
          thisButton.style.background='#0f0';
        } else {
          thisButton.style.background='#f00';
        }

      }

    </script>

如果我使用“红色”或“绿色”作为颜色，则可以使用，但是如果我使用上述十六进制或rgb（255,0,0），则if始终返回“ false”。有什么想法我做错了吗？

Answer 1

您正在将背景色与十六进制的短版进行比较。将其与完整的6位数十六进制进行比较：

if (thisButton.style.background.toLowerCase() == '#00ff00')

但是考虑为此使用一些类。切换类是更好的方法。

Answer 2

您没有使用正确的十六进制代码。

红色为#FF0000，绿色为#008000

Answer 3

看起来浏览器正在“自动校正”所应用的颜色。在测试中，如果我设置thisButton.style.background = 'rgb(255,0,0)'，然后用console.log(thisButton.style.background)读出该值，则它将在每个逗号后添加一个空格，给我rgb(255, 0, 0)。有关演示，请参见this Fiddle。

我建议添加一个data-color属性，该属性完全在您的控制之下。

  function changeColor(button) {
    var thisButton = document.getElementById(button)

    if (thisButton.getAttribute('data-color') === 'red') {
      thisButton.style.background='#0f0';
      thisButton.setAttribute('data-color', 'green');
    } else {
      thisButton.style.background='#f00';
      thisButton.setAttribute('data-color', 'red');
    }

  }

Answer 4

背景颜色样式属性高度依赖于浏览器。 Chrome可能会输出类似objectGuid的内容，而Internet Explorer可能会输出objectSid的内容。

尝试在您自己的模型中保留按钮的状态。

Details

如果您想要有一个类似（btn切换）的类，可以按以下步骤进行：

rgb(0, 255, 0)

Answer 5

它对我有用，也许尝试使用document.querySelector而不是document.getElementById。

JavaScript来切换按钮颜色

5 个答案: