What would be the best way to color each letter of a webpage randomly with JavaScript?

Question

I want to make a page that has each letter individually and randomly colored. The way I'm thinking of doing this is to put a span and /span tag around each letter and give the span a style attribute equivalent to the css color property with a random rgb value.

Is this a "good" way? Is there a better way? I put good in quotes because tr here doesn't seem to be any elegant way to do this to me.

Thanks!

Answer 1

use lettering.js http://letteringjs.com/

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

you can download the lettering.js

This will break the text in the class into span with unique classes which you can then target later

Answer 2

with jquery: https://jsfiddle.net/geLrvur3/3/

$(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);
});

Answer 3

Using jQuery you can do something like this:

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)));
});