js 没有边界

Question

我是新手。我想将我的页面颜色更改为白色，但更改后，我希望我的 .symbol 类边框更改为黑色，但我的一个符号不起作用，尽管我没有发现任何问题。可能是什么问题？

下面是我的代码：

https://codepen.io/mizginyildirak/pen/zYmoYme

function handleStyleColorChange() {
  if (event.target.matches('.white-btn')) {
    document.body.style.color = "#141516"
    document.querySelector(".symbol").style.borderColor = "#141516";

  } else {
    document.body.style.color = "#ced4e2"
    document.querySelector(".symbol").style.borderColor = "#ced4e2";
  }
}

我尝试添加 document.querySelector(".symbol").style.borderColor = "#ced4e2";

但是没用

Answer 1

发生这种情况是因为您有多个元素具有相同的类，所以我们需要遍历它并一个一个地更改样式，您可以尝试这样做：

function changeStyle(color) {
    document.querySelectorAll(".symbol").forEach((item) => {
         item.style.borderColor = color;
     });
}

function handleStyleColorChange() {
   if (event.target.matches('.white-btn')) {
      document.body.style.color = "#141516"
      changeStyle("#141516");
    } else {
      document.body.style.color = "#ced4e2"
      changeStyle("#ced4e2");
    }
}