0

consider the following

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

All I want is to give random colors to each letter of the word.

One approach I thought is to have

<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>

and color each letter as 

.t {
 color: black
}

.r {
 color: black
}

.a {
 color: pink
}

.c {
 color: blue
}

.r {
 color: yellow
}

Is there a better way?

4

2 に答える 2

0

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>
于 2013-06-30T21:35:35.967 に答える
0

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 を使用してテキストを生成します。

于 2013-07-04T04:57:28.910 に答える