JavaScript - изменение цвета текста несколько раз между двумя цветовыми диапазонами - PullRequest
Новая
       22

JavaScript - изменение цвета текста несколько раз между двумя цветовыми диапазонами

2 голосов
/ 04 апреля 2019

Мне было интересно, может ли кто-нибудь помочь мне изменить цвет текста несколько раз, тогда сформируйте цвет # 627CA9 на #FFFFFF и наоборот.

Я пробовал это: 

function changeColor(id) {
  var x = document.getElementById(id);
  if (document.getElementById(id).style.color = "#627CA9")
    document.getElementById(id).style.color = "#FFFFFF"
  else {
    document.getElementById(id).style.color = "#627CA9"; // forecolor
  }

}
<div style="cursor: pointer;" onclick="changeColor('myid1'); return false;" id="myid1" class="centered">CHVRCHES</div>
<div style="cursor: pointer;" onclick="changeColor('myid2'); return false;" id="myid2" class="centered">PVRIS</div>

Код меняет цвет только 1 раз.

(Извините, мой английский)

Спасибо

Ответы [ 3 ]

3 голосов
/ 04 апреля 2019

Помимо того, что вы назначаете цвет с помощью "=" вместо проверки его с помощью "==", цвет также устанавливается как RGB. Проверка на это, похоже, работает; 

function changeColor(id) {
  var x = document.getElementById(id);
  
  if (x.style.color != "rgb(255, 255, 255)")
    x.style.color = "#FFFFFF";
  else {
    x.style.color = "#627CA9"; // forecolor
  }

}
<div style="cursor: pointer;" onclick="changeColor('myid1'); return false;" id="myid1" class="centered">CHVRCHES</div>
<div style="cursor: pointer;" onclick="changeColor('myid2'); return false;" id="myid2" class="centered">PVRIS</div>
1 голос
/ 04 апреля 2019

Вам нужно сравнивать значения, а не назначать их. В условии поставить два знака равенства. 

if (document.getElementById(id).style.color == "#627CA9")

UPD: Кроме того, обычно при настройке цвета с помощью javascript он преобразуется в RGB, поэтому дальнейшее сравнение с HEX больше невозможно. Вам придется сравнивать и устанавливать значения в RGB, но это не очень хорошая практика. Лучшим решением было бы создать дополнительный класс и стилизовать его с помощью CSS, что позволит вам проверить наличие класса в элементе и, основываясь на этом, удалить или добавить этот класс.

1 голос
/ 04 апреля 2019

Проблема в document.getElementById(id).style.color = "#627CA9", измените его на document.getElementById(id).style.color == "#627CA9", также вы должны использовать классы и изменить имя класса 

function changeColor(id) {
  var x = document.getElementById(id);
  if (x.className === "white") x.className = "";
  else x.className = "white";
}
div {
  color: #627CA9;
}

.white {
  color: #FFFFFF;
}
<div style="cursor: pointer;" onclick="changeColor('myid1'); return false;" id="myid1" class="centered">CHVRCHES</div>
<div style="cursor: pointer;" onclick="changeColor('myid2'); return false;" id="myid2" class="centered">PVRIS</div>

Вы также можете выполнить действие автоматически с помощью CSS 

@keyframes color-change {
  0% {
    color: #627CA9;
  }
  50% {
    color: #FFFFFF;
  }
  100% {
    color: #627CA9;
  }
}

.change-color {
  animation-name: color-change;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
<div class="change-color">CHVRCHES</div>
...