用JavaScript对网页的每个字母随机着色的最佳方法是什么？

我想做一个页面，每个字母都有单独的颜色和随机的颜色。我考虑这样做的方式是在每个字母周围放置span和/span标记，并为span指定一个样式属性，该属性相当于css color属性和随机rgb值

这是一种“好”的方式吗？有更好的办法吗？我在引号中加上“好”，因为这里似乎没有任何优雅的方式来对我这样做

---

谢谢

使用jQuery可以执行以下操作：

var text = "hello hello hello world";
var letters = text.split(''); 
letters.forEach(function(letter){
  $('body').append($('<span>').text(letter)
    .css('color', '#' + Math.floor(Math.random() * 16777216).toString(16)));
});

var text=“你好世界”；
变量字母=文本分割（“”）；
字母。forEach（函数（字母）{
$（'body'）。追加（$（''）。文本（字母）
.css（'color'，'#'+Math.floor（Math.random（）*16777216.toString（16））；
});

使用letting.js

$（文档）.ready（函数（）{
$（“.classname”）.letting（）；
});

您可以下载letting.js

这将把类中的文本拆分为具有唯一类的span，您可以在以后使用jquery将这些类作为目标：

$（函数（）{
$（'p'）。每个（函数（索引，元素）{
变量$el=$（元素）；
var words=$el.text（）.split（“”）.join（“”）.split（“”）.join（“”）；
$el.html（“”）；
for（var i=0；i

这似乎是唯一与方式相关的：（tldr：没有额外的元素就无法做到）样式只能应用于HTML元素（标记），而不能应用于标记中的部分内容。因此，除非每个字母都包含在自己的标记中，否则无法通过样式对每个字母进行不同的颜色设置。下面的问题要求对jQuery执行完全相同的操作，但公认的答案是（大部分）香草JS：-您只需调整它来设置颜色。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="_scripts/jquery.lettering.js"></script>
 <script>
  $(document).ready(function() {
    $(".classname").lettering();
  });
</script>

$(function(){
$('p').each(function(index, element) {
    var $el = $(element);
    var words = $el.text().split(' ').join('').split(' ').join('');
    $el.html('');
    for (var i = 0; i < words.length; i++) {
      var newSpan = $('<span>').text(words[i] + ' ');
      $el.append(newSpan);
    }
  });

  setInterval(function() {
    $('span').each(function(){
      var red   = Math.floor(Math.random() * 256);
      var green = Math.floor(Math.random() * 256);
      var blue  = Math.floor(Math.random() * 256);
      $(this).css('color', 'rgb(' + red + ',' + green + ',' + blue + ')');
    });
  }, 500);
});