Javascript 切换SVG图标的颜色

我希望这个SVG图标的填充颜色在我单击它时改变，在再次单击它时改变回来。我该怎么做？ 我最好使用Javascript来实现这一点

.删除svg{ 填充物：灰色； 不透明度：0.8； 高度：50px； 宽度：45px； } .删除svg:悬停{ 填充物：红色； 不透明度：0.7； 过渡时间：0.3s； } 钮扣{ 外观：无； 宽度：47.5px； 高度：50px； 框大小：边框框； 位置：相对位置； 背景：白色； 边界：无； 光标：指针； }

---

我只通过添加clicked类修改了CSS代码，还编写了一个简单的JS脚本。以下是JS如何做到这一点：

.remove svg{
  fill: gray;
  opacity: 0.8;
  height: 50px;
  width: 45px;
}
.remove.clicked svg{
  fill: red;
  opacity: 0.7;
  transition-duration: 0.3s;
}
 button{
  appearance: none;
  width: 47.5px;
  height: 50px;
  box-sizing: border-box;
  position: relative;
  background: white;
  border: none;
  cursor: pointer;
}

---

首先搜索1如何使用JS处理单击2如何使用JS更改CSS，等等 var button = document.querySelector("button"); button.addEventListener("click", function(){ this.classList.toggle("clicked"); });