Javascript 根据div颜色背景更改div的颜色

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

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

如果激活最低位置的功能而不单击按钮，则需要禁用第一个功能

函数changeColorOnReloadIfGreen（）{
var x=document.getElementById（'box-1'）；
如果（x.style.backgroundColor=='green'）{
x、 style.backgroundColor='黑色'；
}
}
/*********************************************************/
/*
仅供参考，请参见下文
将框-1更改为黑色可以工作（不带if语句）。
*/
/*********************************************************/
/*
var x=document.getElementById（'box-1'）
x、 style.backgroundColor='黑色'；
*/

.box-1{
背景颜色：绿色；
宽度：100px；
高度：100px；
保证金：30px 0px 0px 30px；
}

---

在外部CSS中设置

背景色时，需要
getComputedStyle（）
来获取其值

此外，返回的值是
rgb（）
格式的，因此下面是一个示例


函数changeColorOnReloadIfGreen（）{
var x=document.getElementById（'box-1'）；
var c=window.getComputedStyle（x）.getPropertyValue（'background-color'）；
如果（c==“rgb（0，128，0）”）{
x、 style.backgroundColor='黑色'；
}
}
/*********************************************************/
/*
仅供参考，请参见下文
将框-1更改为黑色可以工作（不带if语句）。
*/
/*********************************************************/
/*
var x=document.getElementById（'box-1'）
x、 style.backgroundColor='黑色'；
*/
.box-1{
背景颜色：绿色；
宽度：100px；
高度：100px；
保证金：30px 0px 0px 30px；
}
代码不起作用的原因是类中有
背景色
css。如果它是一个内联css，那么它将被使用
x.style.backgroundColor
检测到。因此，您可以做的是，创建一个新类
green
，检查该类是否存在，如果找到该类，则在元素中添加一个新类
black


函数changeColorOnReloadIfGreen（elem）{
var x=document.getElementById（'box-1'）；
if（x.classList.contains（'green'））{
x、 类列表。删除（“绿色”）；
x、 添加（“黑色”）；
}
}
.box-1{
宽度：100px；
高度：100px；
保证金：30px 0px 0px 30px；
}
格林先生{
背景颜色：绿色；
}
布莱克先生{
背景色：黑色；
}
因为您设置了
背景色：绿色style=“background color:green；”“
添加到div:


函数changeColorOnReloadIfGreen（）{
var x=document.getElementById（'box-1'）；
如果（x.style.backgroundColor=='green'）{
x、 style.backgroundColor='黑色'；
}
}
/*********************************************************/
/*
仅供参考，请参见下文
将框-1更改为黑色可以工作（不带if语句）。
*/
/*********************************************************/
/*
var x=document.getElementById（'box-1'）
x、 style.backgroundColor='黑色'；
*/
.box-1{
/**背景颜色：绿色*/
宽度：100px；
高度：100px；
保证金：30px 0px 0px 30px；
}