javascript - 重新设置网页上按钮的颜色

Question

我有许多按钮，一旦单击它们，颜色就会从绿色变为红色，以表明它们已被单击。

我想创建一个按钮，单击该按钮会将所有按钮重置为其原始颜色(绿色)。

我已经尝试过，但我找到的最接近的解决方案是创建一个重置整个页面的按钮，但这并不理想。

这是我的按钮代码和改变颜色的函数:

<button id="button1" onclick="myFunction3(); setColor2('button1');">example</button>

<script>
    function setColor2(btn,color) {
        var property=document.getElementById(btn);

        if (window.getComputedStyle(property).backgroundColor == 'rgb()') {
            property.style.backgroundColor=color;
        }
        else {
            property.style.backgroundColor = "#f47121";
        }
    }
</script>

Answer 1

您可以像这样删除所有内联样式:

function setColor2(btn, color) {
  var property = document.getElementById(btn);

  if (window.getComputedStyle(property).backgroundColor == 'rgb()') {
    property.style.backgroundColor = color;
  } else {
    property.style.backgroundColor = "#f47121";
  }
}

function reset() {
  var buttons = document.getElementsByTagName('button');
  for (var i = 0; i < buttons.length; i++) {
    var button = buttons[i];
    button.removeAttribute("style");
  }
}

<button id="button1" onclick="setColor2('button1');">example</button>
<button id="button2" onclick="setColor2('button2');">example</button>
<br><br>
<button id="reset" onclick="reset()">Reset</button>

But as suggested before it's better if you can toggle between classnames