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

如果可以在 CSS 中定位第 n 个字母，那就更好了。由于目前不可能，是的，我认为您的解决方案是最好的。但是，您应该正确关闭标签：

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

如果您的文本像您的示例一样简短且固定，那么我认为这是最好的。如果它较长且动态，则使用 JavaScript 生成文本。

Answer 2

如果你正在寻找 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>