按钮颜色同时显示_编程开发

按钮颜色同时显示

创始人

2024-11-04 07:32:11

0次

下面是一个使用HTML、CSS和JavaScript的示例，可以实现按钮颜色同时显示的效果：

HTML代码：

CSS代码：

button {
  width: 100px;
  height: 50px;
  margin: 10px;
}

.active {
  background-color: red;
}

JavaScript代码：

var buttons = document.querySelectorAll('button');

buttons.forEach(function(button) {
  button.addEventListener('click', function() {
    buttons.forEach(function(button) {
      button.classList.toggle('active');
    });
  });
});

这段代码首先通过document.querySelectorAll('button')选择所有的按钮，并将它们存储在一个变量buttons中。

然后，使用forEach方法为每个按钮添加一个点击事件监听器。当按钮被点击时，forEach方法遍历所有的按钮，并使用classList.toggle方法在按钮的类列表中切换active类。这样，当一个按钮被点击时，它将添加或删除active类，从而改变按钮的颜色。

通过这种方式，无论点击哪个按钮，所有的按钮都会同时显示按钮颜色。

上一篇：按钮颜色及周围边距问题

下一篇：按钮验证 - Angular 2响应式表单

按钮颜色同时显示

相关内容

热门资讯