Different letter colors in a word [closed]

Is there any solution to combine the html,css an the js to change the letters color's of a word, one by one? Some kind of easy method, I'm a newbie in the js.

enter image description here



Suppose in your HTML, you have a paragraph as follows

<p id="my-par">Sentence</p>

You can do this in javascript. Wrap each letter in a <span> tag.

var par = document.getElementById("myPar");
var colors = ["red", "blue", "green", "orange"];

par.innerHTML = par.innerHTML.split('').map(function(c) {
    return "<span class='" + colors[Math.floor(Math.random() * colors.length)] + 
    "'" + ">" + c + "</span>"



Yes there is, and a popular one, too

How it works?

You write you HTML as usual:

<h1 class="fancy_title">Some Title</h1>

Adds a bit of JS magic:

$(document).ready(function() {

(Note that lettering.js depends on jQuery, so you should be somewhat familiar with it. if you're not, it's a good time to begin.)

And.. Voilà! your HTML replaced with this:

<h1 class="fancy_title">
  <span class="char1">S</span>
  <span class="char2">o</span>
  <span class="char3">m</span>
  <span class="char4">e</span>
  <span class="char5"></span>
  <span class="char6">T</span>
  <span class="char7">i</span>
  <span class="char8">t</span>
  <span class="char9">l</span>
  <span class="char10">e</span>

Now, you can freely use these new classes to style your letters as you like:

.fancy_title .char1 {
  color: red

.fancy_title .char6 {
  color: green

Extra tip: use the :nth-child selector

thie :nth-child selector allows you the repeat your styles for each element that match a certain role.

I made a simple code snippet to demonstrates its power:

$(document).ready(function() {
.fancy_title span:nth-child(4n+1) {
   color : red

.fancy_title span:nth-child(4n+2) {
   color : blue

.fancy_title span:nth-child(4n+3) {
   color : gold

.fancy_title span:nth-child(4n+4) {
   color : green
<!DOCTYPE html>

  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js

  <h1 class="fancy_title">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eveniet ea esse deleniti et illum dicta, reiciendis quia sunt quasi saepe voluptates fuga aut blanditiis perspiciatis! Rem, tempore iste vel.

Read more about :nth-child here: https://css-tricks.com/how-nth-child-works/


Here is an example:

<p><span id="s1">W</span><span id="s2">O</span><span id="s3">R</span><span id="s4">D</span></p>


s1.setAttribute("style", "color:Red");
s2.setAttribute("style", "color:Blue");
s3.setAttribute("style", "color:Green");
s4.setAttribute("style", "color:Brown");

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 '<span class="color_'+ (index+1) +'">' + curLetter + '</span>';

  el.innerHTML = newVal.join('');
/* The list of your colors and class name*/
span,div {
  font-size : 42px;
  color : blue;
  color : yellow;
  color : red;
  color : pink;
  color : brown;
  color : purple;

  color : green;
<span class='color_1'>E</span><span class='color_2'>x</span><span class='color_3'>a</span><span class='color_4'>m</span><span class='color_5'>p</span><span class='color_6'>l</span><span class='color_7'>e</span>

<div id='toChange'>Example</div>
<button onclick='update()'>click to change above</button>


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.