javascript - 根据 div 颜色背景更改 div 的颜色

Question

我有一个 div，我需要根据 javascript if 语句更改颜色。通过按绿色 divbox 进行检查，如果背景设置为绿色，则该框应更改为黑色背景。

注意!我不想使用其他解决方案。我只是想了解为什么这个特定的解决方案不起作用。

如果您激活无需单击按钮即可工作的最低位置功能，则需要停用第一个功能。

function changeColorOnReloadIfGreen() {
var x = document.getElementById('box-1');
if (x.style.backgroundColor == 'green') {
  x.style.backgroundColor = 'black';
 }
}

/*********************************************************/
/*
Just for reference, activating below
that changes box-1 to black works (without if-statement).
*/
/*********************************************************/
/*
var x = document.getElementById('box-1')
x.style.backgroundColor = 'black';
*/

.box-1 {
  background-color: green;
  width: 100px;
  height: 100px;
  margin: 30px 0px 0px 30px;
}

<div id="box-1" class="box-1" onclick="changeColorOnReloadIfGreen()"></div>

Answer 1

你的代码不工作的原因是因为你在一个类中有 background-color css。如果它是一个内联 css，那么它会被 x.style.backgroundColor 检测到。因此，您可以做的是，创建一个新类 green 并检查该类是否存在，如果找到该类，则在该元素中添加一个新类 black。

function changeColorOnReloadIfGreen(elem) {
var x = document.getElementById('box-1');
 if (x.classList.contains('green')) {
   x.classList.remove("green");
   x.classList.add("black");
 }
}

.box-1 {
  width: 100px;
  height: 100px;
  margin: 30px 0px 0px 30px;
}
.green {
  background-color: green;
}
.black{
  background-color: black;
}

<div id="box-1" class="box-1 green" onclick="changeColorOnReloadIfGreen(this)"></div>