单击时如何获得基本文本颜色变化答案

【问题标题】：How do get basic text color change when clicked单击时如何获得基本文本颜色变化
【发布时间】：2017-01-02 11:45:22
【问题描述】：

例子：

<div class="change">CLICK ME</div>

示例 1.2：

if: div.change = clicked. font-style:color:black; true:

我基本上希望文本在按下时改变颜色。如果可以，您可以添加列表吗？像这样：

按下文本时，将从该列表中随机选择颜色：黑色,蓝色,红色,#1d23f4;,橙色,#123123;

【问题讨论】：

你已经尝试过了吗？你在使用 jQuery 还是 vanilla Javascript？
我没有，我没有使用其中任何一个，从未接触过 java 或 jquery。只是html和css
您不能仅使用 html 或 css 执行此操作，因为您需要处理点击事件。这对你有用api.jquery.com/click

标签： javascript html css text

【解决方案1】：

您需要使用 JavaScript。我将类更改为 id，添加了 onclick。我将你所有的颜色添加到一个数组中，每次单击按钮时，它都会得到一个与数组一样长的随机数。然后它通过 id 找到 div，并更改颜色。

<div onclick="clickMe()" id="change">CLICK ME</div>


<script>
	var colorArray = ["black","blue","red","#1d23f4","orange","#123123"]
		function clickMe() {
		 var randomNumber = Math.floor((Math.random() * colorArray.length))
		 document.getElementById('change').style.color = colorArray[randomNumber];
	}
  </script>

我对@sebasaenz 的回答的优点是您不需要加载 jQuery，甚至不需要加载单独的 javascript 文件。并不是说这是一个更好的答案，只是更容易。

【讨论】：

【解决方案2】：

尝试使用类似的东西：

$(document).ready(function(){

   var arr = ["black","blue","red","#1d23f4","orange","#123123"];

   $(".change").click(function(){

      var random = arr[Math.floor(Math.random() * arr.length)];

      $(this).css("background-color", random);

   });

});

我强烈建议你查看 jQuery 文档，使用它的 API 处理点击事件非常容易。

jQuery API

【讨论】：