Моя цель: менять цвет воздушного шара при каждом нажатии на него. Моя проблема: журнал консоли показывает мне, что мой цвет пуст в первый раз, вместо того, чтобы получать данные из css, шар будет синим, а не зеленым. Ты знаешь почему ? У вас есть какие-либо советы для решения этой проблемы?

function change() {
  var balloon = document.getElementById("balloon");
  var color = balloon.style.backgroundColor;
  if (color == "red")
    color = "green";
  else
    color = "blue";
  balloon.style.backgroundColor = color;
}
body {
  display: flex;
  justify-content: center;
  padding-top: 50%;
}

#balloon {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 100%;
}
<div id="balloon" onclick="change();"></div>
0
user8950902 28 Фев 2018 в 19:59

3 ответа

Лучший ответ

Вы используете атрибут style для проверки свойства background-color элемента, но вместо этого вы должны использовать метод window.getComputedStyle() для проверки правил CSS, которые применяются к элементу, поэтому вам нужно изменить немного вашего кода.

Функция change ():

function change() {
  var balloon = document.getElementById("balloon");
  var color = window.getComputedStyle(balloon, null).getPropertyValue('background-color');
  if (color == "red")
    color = "green";
  else
    color = "blue";
  balloon.style.backgroundColor = color;
}

Свойство style используется для применения правил стиля, а метод window.getComputedStyle() используется для получения правил стиля.

0
ths 28 Фев 2018 в 17:20

При первом вызове функции обработки событий вы должны использовать window.getComputedStyle() вместо element.style.backgroundColor, поскольку вы определили background-color в таблице стилей, а не непосредственно в элементе. Код ниже должен делать то, что вы пытаетесь достичь.

Проверьте этот связанный вопрос SO для более подробной информации о window.getComputedStyle()

var red = 'rgb(255, 0, 0)';
document.getElementById("balloon").addEventListener('click', change);

function change() {
  var color = this.style.backgroundColor || getComputedStyle(this, null).getPropertyValue("background-color");
  
  this.style.backgroundColor = getNextColor(color);
}

function getNextColor(currentColor) {
  var color = null;
  
  if (currentColor == "red" || currentColor == red)
    color = "green";
  else if (currentColor == "green")
    color = "blue";
  else
    color = "red"
    
  return color;
}
body {
  display: flex;
  justify-content: center;
  /*padding-top: 50%;*/
}

#balloon {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 100%;
}
<div id="balloon"></div>
0
Tom O. 28 Фев 2018 в 17:47

Вы можете попробовать это

var element = document.getElementById('balloon'),
    style = window.getComputedStyle(element),
Color = style.getPropertyValue('backgroundColor');
0
Abasaheb Gaware 28 Фев 2018 в 17:15