时间戳

首页 > 解决方案 > 根据 div 颜色背景更改 div 的颜色

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

问题描述

我有一个 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>

标签： javascripthtmlcss

解决方案

您的代码不起作用的原因是因为您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>

推荐阅读