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>

但如前所述，如果你可以在类名之间切换
，那就更好了

Answer 2

如果通过CSS类或其他属性选择器完成所有操作，而不是直接设置这样的样式，这会容易得多。

例如，让我们使用两个CSS规则：

button{
  background-color: '#33cc33'; // a mid green
}

button.selected {
  background-color: '#cc3333'; // a red
}

然后你点击的代码就可以将'selected'的css类添加到有问题的按钮中，你的重置函数就变成了：

var buttons = document.getElementsByTagName('button');
for(var button in buttons){
  button.className = '';
}

Answer 3

你只需要通过classname抓取它们并循环，测试每个按钮。如果你只是添加和删除一个类，然后在css中定义类规范，那么维护会更好更容易。

＆＃13;

function myFunction3() {
  // whatever this does   
}

function setColor2() {
  var buttonsToChange = document.getElementsByClassName('change-color');

  for (var i = 0; i < buttonsToChange.length; i++) {
    var button = buttonsToChange[i];
    console.log("Button bg color: ", button.style.backgroundColor);
    if (button.style.backgroundColor == 'rgb(244, 113, 33)') {
      button.style.backgroundColor = 'rgb(227, 227, 227)';
    } else {
      button.style.backgroundColor = 'rgb(244, 113, 33)';
    }
  }

}

＆＃13;

<button id="button1" class="change-color" onclick="myFunction3(); setColor2();">example</button>
<button id="button2" class="change-color" onclick="myFunction3(); setColor2();">example</button>
<button id="button3" onclick="myFunction3();">example</button>

＆＃13;

Answer 4

这样的任务的最佳解决方案是使用jQuery而不是常规JavaScript。使用jQuery，您可以使用类选择器一次更新所有按钮的颜色。

HTML：

<button class="color-button button-green">Color button 1</button>
<button class="color-button button-green">Color button 2</button>
<button id="reset-color">Reset color</button>

CSS：

.color-button {}

.button-green {
  background-color: green;
}

.button-red {
  background-color: red;
}

的JavaScript / jQuery的：

$(document).ready(function() {
    $('.color-button').click(function() {
        $(this).removeClass('button-green').addClass('button-red');
    });

    $('#reset-color').click(function() {
        $('.color-button').removeClass('button-red').addClass('button-green');
    });
});

JS小提琴：https://jsfiddle.net/mt8f85jj/

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

4 个答案: