css - 如何给单词的字母随机颜色？

Question

考虑以下问题

<div id="logo">tra¢r</div>

我只想给单词的每个字母随机颜色。

我认为的一种方法是

<div id="logo">tra¢r
  <span class="t">t
  <span class="r">r
  <span class="a">a
  <span class="c">¢
  <span class="r">r
</div>

并将每个字母着色为

.t {
 color: black
}

.r {
 color: black
}

.a {
 color: pink
}

.c {
 color: blue
}

.r {
 color: yellow
}

有没有更好的办法？

Answer 1

如果你正在寻找 JS 解决方案，你可以试试这个:

<div id="logo"></div>
<script type="text/javascript">
var myWord = ["t","r","a","¢","r"];
var myColors = ["black","black","pink","blue","yellow"];
for (var i = 0; i < myWord.length; i++) {
    document.getElementById("logo").innerHTML += "<span style='color:" + myColors[i] + "'>" + myWord[i] + "</span>";
}
</script>