Question

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

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

如果激活没有按钮单击的最低位置功能，则需要取消激活第一个功能。

＆＃13;

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';
*/

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您的代码无效的原因是因为您在类中有background-color个css。如果它是内联css那么它将使用x.style.backgroundColor检测到。所以，你可以做的是，创建一个新的类green并检查这个类是否存在，如果找到这个类，在元素中添加一个新的类black。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

＆＃13;

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';
*/

＆＃13;

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

＆＃13;

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

＆＃13;

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

Javascript function to convert color names to hex codes

或者做这样的事情

＆＃13;

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';
*/

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

因为你在CSS类中设置了background-color: green;，所以JavaScript“无法找到”元素的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>

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

3 个答案: