如何使用CSS/HTML或Javascript更改单词中单个字母的颜色

这是我试图实现的一个例子：

[网站链接已删除]

但是如果你看一下源代码，它有很多凌乱的CSS代码。有没有办法用Javascript实现这一点？

---

提前感谢

我认为这会有所帮助，您可以实现悬停功能

<script type="text/javascript">
   var message = "The quick brown fox.";
   var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue
   for (var i = 0; i < message.length; i++)
      document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>");
</script>

var message=“敏捷的棕色狐狸。”；
var colors=新数组（“#ff0000”、“#00ff00”、“#0000ff”）；//红，绿，蓝
对于（变量i=0；i

很酷的运动。我将使用jquery作为辅助工具来执行此操作：

编辑：悬停在这里。没有测试它，所以检查语法错误以防万一：p

<div id="divWithAString">a string</div>
(...)
<script type="text/javascript">
function CoolFunctionToGenerateHexColours(){
    var color ="#", i ;
    for(i=0;i<6;i++){
        color += Math.floor(Math.random()*16).toString(16);
    }
    return color;
}

var s = $("#divWithAString").text();
$("#divWithAString").empty();
$(s).each(function(i,e){
   var colorHex = CoolFunctionToGenerateHexColours();
   var $htmlnode = $('<span >'+e+'</span>');
   $htmlNode.hover(function(){
       $(this).attr("style", "color: "+colorHex +";");
   }, function(){
       $(this).attr("style", "");
   });
   $("#divWithAString").append($htmlNode);

});
</script>

字符串
(...)
函数CoolFunctionToGenerateHexColours（）{
var color=“#””，i；
对于（i=0；i这是一种仅用HTML编写的方式：

<div id="wrap" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin, felis nec lacinia egestas, metus sem tempor ligula, nec feugiat risus erat a ante. Vivamus a neque eu lorem pharetra vulputate ac id arcu. Nulla facilisi. Quisque porta purus id dolor sollicitudin ut interdum eros bibendum. Nunc dignissim velit vitae leo posuere vel tristique lacus bibendum. Nam suscipit elit magna. Cras odio ipsum, ultricies aliquet lacinia ac, tincidunt ut erat. In venenatis interdum mauris, a lobortis augue mattis vel. Donec sem urna, adipiscing laoreet consectetur nec, sodales id nibh. Integer gravida sem luctus nibh luctus tristique. In tempor adipiscing nisl. Proin consectetur, lorem eget sodales auctor, nulla quam condimentum tortor, sed fringilla massa neque non dolor.
</div>


同一天的知识是一位杰出的预言家。独身前庭，猫科动物，暂时性舌苔，宗教信仰，宗教信仰，宗教信仰，宗教信仰，宗教信仰，宗教信仰，宗教信仰，宗教信仰，宗教信仰，宗教信仰，宗教信仰，宗教信仰，宗教信仰，宗教信仰，宗教信仰，宗教信仰在莫里斯的威尼斯，奥古斯·马蒂斯·韦尔纳（lobortis augue mattis vel.Donec sem urna）、拉奥里特（laoreet Concertetur nec）、苏打水（sodales id Nib）、拉科尼亚（Ultrices aliquet lacinia ac）、拉科尼亚（Tincius ut Era）和拉科尼亚（Tincius Uttus Uttius Tris）。在莫里斯的威尼斯，奥古斯特（Venetis interdum mauris）、奥古斯特（Ogue mattis vel）、奥古斯特（lorem）和奥勒姆（lorem）等等苏打水拍卖商，无调味玉米饼，无酒精饮料。

JS:

var elem=document.getElementById（“wrap”）；
var l=elem.innerHTML.length；
var newAns=“”；
对于（var a=0；au）而言，不需要javascript，基本上只需输入“ULTRATEXT”进入列表项，并使用css hover属性。如何将其关闭为非建设性？这是一个很棒的练习：p@fmsf.因为问题不应该是学生的练习readers@gdoron：这是一个有效的问题。但是我会问代码高尔夫是什么？@fmsf。答案是：“代码高尔夫不再是关于堆栈溢出的主题”它不起作用：（我的程序说这里有一个语法错误：$（this）.attr（“style”，“color:'+colorHex+”；”）；然后用
$（this.attr（“style”，“color:+colorHex+”；）替换它）
并试着自己想一想。对不起，我可以说我不知道如何用javascript编程。这不是javascript问题，
语法错误是每种语言中都会出现的常见错误。花几秒钟阅读错误行将帮助您修复它（好吧，不阅读也可以复制/粘贴）
var elem=document.getElementById("wrap");
var l=elem.innerHTML.length;
var newAns="";
for(var a=0;a<l;a++)
{
    newAns+='<span onmouseover="change1(this)" onmouseout="change2(this)" >'+elem.innerHTML.charAt(a)+'</span>';
}
elem.innerHTML=newAns;

function change1(x)
{
    x.style.color="yellow";
}
function change2(x)
{
    x.style.color="black";
}