单击时如何切换html元素的文本颜色?

时间:2019-11-03 17:42:32

标签: html text colors toggle

我想在单击html元素时更改其颜色。我不希望文本本身发生变化,仅希望颜色发生变化。颜色应与随后的点击来回切换。感谢您的任何帮助。

4 个答案:

答案 0 :(得分:1)

如果要切换字体颜色,请使用:

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;
}

 });

答案 1 :(得分: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>

答案 2 :(得分:0)

我认为在简单的情况下,您的解决方案应该与此类似

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

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

答案 3 :(得分:0)

只需使用javascript:

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