Как мне переключить цвет текста HTML-элемента при нажатии на него?

Question

Я хочу изменить цвет HTML-элемента при его нажатии. Я не хочу, чтобы сам текст менялся, только цвет. Цвет должен переключаться вперед и назад с последующими щелчками. Спасибо за любую помощь.

Answer 1

Вот вам рабочий пример:

let flag = true
function toggleColor() {
  const exampleStyle = document.getElementById("example").style
  flag ? exampleStyle.color = "red" : exampleStyle.color = "blue"
  flag = !flag
}

<div id="example" onclick="toggleColor()">your text</div>

Answer 2

, если вы хотите переключить цвет шрифта, используйте:

var h1=document.querySelector("h1");
var iscolor=true;
h1.addEventListener("click",function(){
if (iscolor){
h1.style.color="yellow";
iscolor=false;}
else{h1.style.color="black";
iscolor=true;
}

 });

Answer 3

Просто используйте JavaScript:

<span id="demo" onclick="clicked()">your text</span>
<script type="text/javascript">
     function clicked() {
          document.getElementById("demo").style.color = "red";
     }
</script>

Answer 4

Я думаю, что в простом сценарии ваше решение должно выглядеть примерно так:

var element = document.querySelector('your-element-selector');

element.addEventListener('click', function(e) {
   element.style.backgroundColor = 'wanted color';
});