One Solution :
No need to add any script just vanilla CSS-HTML-JS
// we make a function in charge
// to split the content and to
// wrap each letter in a span with
// CSS class of your choice
function update (){
var el = document.getElementById('toChange');
var curVal = el.innerText || el.textContent;
var newVal = curVal.split('').map(function(curLetter , index){
return '' + curLetter + '';
})
el.innerHTML = newVal.join('');
}
/* The list of your colors and class name*/
span,div {
font-size : 42px;
}
.color_1{
color : blue;
}
.color_2{
color : yellow;
}
.color_3{
color : red;
}
.color_4{
color : pink;
}
.color_5{
color : brown;
}
.color_6{
color : purple;
}
.color_6{
color : green;
}
Example
Example
