Изменить цвет div на основе цветного фона divs

Question

У меня есть div, который мне нужен, чтобы изменить цвет на основе JavaScript-оператора if. Проверка выполняется нажатием зеленой рамки и, если фон установлен на зеленый, поле должно смениться на черный фон.

Внимание! Я не хочу использовать другое решение. Я просто ищу понимание, почему это конкретное решение не работает.

Если вы активируете функцию с наименьшим положением, которая работает без нажатия кнопки, вам нужно деактивировать первую функцию.

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

Поскольку вы установили background-color: green; в классе CSS, 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>

Answer 3

Когда вы устанавливаете background-color во внешнем CSS, вам нужно 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>