根据divs颜色背景更改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> 

Answer 2

在外部CSS中设置background-color时，需要getComputedStyle()才能获得其值。

此外，返回的值采用rgb()格式，因此这里是一个示例

 function changeColorOnReloadIfGreen() { var x = document.getElementById('box-1'); var c = window.getComputedStyle(x).getPropertyValue('background-color'); if (c == "rgb(0, 128, 0)") { 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> 

---

如果您确实需要与命名的颜色（例如green进行比较，则需要执行以下操作：

• Javascript函数将颜色名称转换为十六进制代码

或者做这样的事情

 function changeColorOnReloadIfGreen() { var x = document.getElementById('box-1'); var c = window.getComputedStyle(x).getPropertyValue('background-color'); if (c == getNameColorAsRGB('green')) { x.style.backgroundColor = 'black'; } } function getNameColorAsRGB(n) { var t = document.createElement('div'); t.style.backgroundColor = n; t.style.display = 'none'; document.body.appendChild(t); var r = window.getComputedStyle(t).getPropertyValue('background-color'); t.remove(); return r; } /*********************************************************/ /* 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 3

因为您设置了background-color: green; 在CSS类中，JavaScript“找不到”元素的background-color属性； 仅仅因为没有。 因此，您可以通过添加style="background-color: green;"将background-color添加到您的元素中style="background-color: green;" 到您的div：

 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()" style="background-color: green;"></div> <!-- Simply add "background-color: green;" via inline style --> 

---

或将另一个类添加到您的CSS代码中，然后使用CSS“切换”类：

 function changeColorOnReloadIfGreen() { var x = document.getElementById('box-1'); if (x.className == 'box-1') { x.classList.remove('box-1'); x.classList.add('box-2'); } } /*********************************************************/ /* 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; } .box-2 { background-color: black; width: 100px; height: 100px; margin: 30px 0px 0px 30px; } 

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