更改所有单击按钮的颜色

Question

我在以下形式的 html 页面中有一组按钮：

<button
      id="testID"
      mat-mini-fab
      ngClass="list-button"
      (click)="onClick($event)"
    >
      Press
    </button>

我尝试使用以下 css 代码更改属于 .list-button class 的每个按钮的颜色：

.list-button:focus {
  background-color: #7d698d;
}

但是，每次点击按钮的颜色都会发生变化（所有之前点击的按钮的颜色也变回原来的颜色）。我该如何解决？我希望所有点击的按钮都保持它们的新颜色。

我还尝试为这个 class 的按钮分配一个 id，并在 onClick() 方法中更改它们的颜色，如下所示，但没有成功。同样的问题仍然存在。你能帮帮我吗？

  onclick(event: any) {
    const btn = document.getElementById('testID');
    if (btn) btn.style.backgroundColor = '#7d698d';
  }

Answer 1

不需要js。在样式表中使用 focus 选择器。

The :focus selector is allowed on elements that accept keyboard events or other user inputs.

~W3

button.list-button:focus {
  background-color: #7d698d;
  color: white;
}

<button class="list-button">Click</button>

用js编辑~。此方法使用 .querySelectorAll("button") 并在每次单击按钮时切换样式 class .focus。这在有多个按钮时效果很好。

// Get all the elements on the basis of query selector (button)
let btn = document.querySelectorAll("button");

for (var i = 0; i < btn.length; i++) {
  (function(index) {
    btn[index].addEventListener("click", function() {
      console.log("Clicked Button: " + index);

      let isPresent = false;

      // Checks if the class is present or not
      this.classList.forEach(function(e, i) {
        if (e == "focus") {
          isPresent = true;
        } else {
          isPresent = false;
        }
      });

      // Toggles the presence of class (.focus) on the basis of the isPresent variable
      if (isPresent) {
        this.classList.remove("focus");
      } else {
        this.classList.add("focus");
      }
    });
  })(i);
}

.focus {
  background-color: #7d698d;
  color: white;
  cursor: pointer;
}

<button id="btn">Click</button>
<button id="btn">Click</button>
<button id="btn">Click</button>

Answer 2

您需要获取触发事件的按钮的 ID

onclick(event: any) {
  const btn = document.getElementById(event.target.id);
  if (btn) btn.style.backgroundColor = '#7d698d';
}

Answer 3

点击另一个按钮后之前点击的按钮颜色重置的原因是焦点设置在上次点击的按钮上。尝试使用 Venkatesh 答案中的代码。

Answer 4

ID 必须是唯一的
您可以使用该函数并传递 el，它将 this 作为参数 function onClick(el){......} 并使用它 onClick(this)
无需获取id可以直接使用el.style或event.target.style见下例

function onClick(el){
  el.style.backgroundColor = '#7d698d';
}

<button
  id="testID-1"
  mat-mini-fab
  ngClass="list-button"
  onclick="onClick(this)"
>
  Press
</button>

<button
  id="testID-2"
  mat-mini-fab
  ngClass="list-button"
  onclick="onClick(this)"
>
  Press
</button>

Also 您可以使用该函数并传递等于 event 的 event 作为参数 function onClick(event){......} 并使用它 onClick(event)

function onClick(event){
  event.target.style.backgroundColor = '#7d698d';
}

<button
  id="testID-1"
  mat-mini-fab
  ngClass="list-button"
  onclick="onClick(event)"
>
  Press
</button>

<button
  id="testID-2"
  mat-mini-fab
  ngClass="list-button"
  onclick="onClick(event)"
>
  Press
</button>

更改所有单击按钮的颜色

Change color of all clicked buttons

html

javascript

css

onclick

button