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>

Answer 2

如果可以在CSS中定位第n个字母，那会更好。自that's not possible for now起，是的，我认为您的解决方案是最好的。但是，您应该正确关闭代码：

<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生成文本。

如何给一个单词的字母提供随机颜色？

2 个答案: