javascript - 如何在javascript中更改backgorundColor元素onclick？

Question

我是 JavaScript 新手。我想在单击时更改菜单按钮的颜色，并在第二次单击时更改颜色。我用 JS 写了一个简单的代码，但它什么也没做。

document.getElementById("menuBtn div").onclick = changeColor;

function changeColor() {
  if (changeColor.style.backgroundColor === "#EF6A6A") {
    changeColor.style.backgroundColor = "#fff"
  } else {
    changeColor.style.backgroundColor = '#EF6A6A'
  }
}

changeColor()

#menuBtn {
  position: fixed;
  display: block;
  cursor: pointer;
  right: 65px;
  top: 35px;
  z-index: 2;
  cursor: pointer;
}

#menuBtn div {
  width: 38px;
  height: 5px;
  background-color: #EF6A6A;
  margin: 8px;
  border-radius: 2100px;
  transition: all 0.3s ease;
}

<div id="menuBtn">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

标签： javascript

Answer 1

最好创建一个新的 css 类并通过单击按钮进行切换。下面会改变backgroundColor.menuBtn

const menuBtn = document.getElementById("menuBtn");

menuBtn.addEventListener("click", changeColor);

function changeColor() {
  menuBtn.classList.toggle("bgColorOrange");
}

#menuBtn {
  position: fixed;
  display: block;
  cursor: pointer;
  right: 65px;
  top: 35px;
  z-index: 2;
  cursor: pointer;
}

#menuBtn div {
  width: 38px;
  height: 5px;
  background-color: #EF6A6A;
  margin: 8px;
  border-radius: 2100px;
  transition: all 0.3s ease;
}

.bgColorOrange {
  background-color: #EF6A6A;
}

<div id="menuBtn">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

如果要在背景颜色为 时添加线条的背景颜色menuBtn白色#EF6A6A。您可以再次创建一个新类并单击按钮进行切换。

const menuBtn = document.getElementById("menuBtn");
const lines = document.querySelectorAll(".line");

menuBtn.addEventListener("click", changeColor);

function changeColor() {
  menuBtn.classList.toggle("bgColorOrange");
  lines.forEach(line => line.classList.toggle("bgColorWhite"));
}

#menuBtn {
  position: fixed;
  display: block;
  cursor: pointer;
  right: 65px;
  top: 35px;
  z-index: 2;
  cursor: pointer;
}

#menuBtn div {
  width: 38px;
  height: 5px;
  background-color: #EF6A6A;
  margin: 8px;
  border-radius: 2100px;
  transition: all 0.3s ease;
}

.bgColorOrange{
  background-color: #EF6A6A;
}

.bgColorWhite{
  background: white !important;
}

<div id="menuBtn">
  <div class="line1 line"></div>
  <div class="line2 line"></div>
  <div class="line3 line"></div>
</div>