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

【问题标题】：How to change backgorundColor element onclick in javascript?如何在javascript中更改backgorundColor元素onclick？
【发布时间】：2021-06-23 07:44:20
【问题描述】：

我是 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>

【问题讨论】：

您的选择器错误menuBtn div。你想改变孩子或父母的颜色吗？
changeColor，一个函数，没有style属性
代码中有很多错误，JS无法搜索menuBtn div"的元素。这不是身份证。应该是menuBtn
@Pete 选择器在任何一种情况下都是错误的，因为 OP 使用 .getElementById() 而不是 .querySelector()/.querySelectorAll()
@Andreas 我知道，这就是我说选择器错误的原因 - 但取决于他们试图做什么会改变给出的答案类型 - 需要循环遍历孩子并改变他们的方式获取元素，其他的你可以改变选择器并修复函数

标签： javascript

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

问题是你引用了你的函数changeColor，它没有属性style.backgroundColor。你需要确保你引用了你的 DOM 元素：

const element = document.getElementById("menuBtn")
element.onclick = changeColor;

function changeColor() {
    if (element.style.backgroundColor === rgb(0,0,0)) {
        element.style.backgroundColor = rgb(3,2,1)
    } else {
        element.style.backgroundColor = rgb(0,0,0)
    }
}

我还修复了你的选择器标签。

【讨论】：

另外，在检查背景颜色时，你没有得到 HEX 值，你会得到 RGB