html/css, changing each letter of text? [closed] Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of html/css, changing each letter of text? [closed] without wasting too much if your time.

The question is published on by Tutorial Guruji team.

Is it possible to change color of each letter of a text, for example, I print on screen in tags text, and i want to iterate to every letter, check its value and change its color accordingly, is that possible in using html/css or javascript to add the tags (or if js has a library that already does that), something like the image below, as you notice, each letter has its own color

enter image description here


create the spans with javascript and style the spans with css:


$('document').ready(function() {
    $('.protein').each(function() {
        var target = $(this).html();
        target = target.split("");
        var result = "";
        for (var i = 0, len = target.length; i < len; i++) {
            result += '<span class="' + target[i] + '">' + target[i] + '</span>';


.V, .L { background-color:green;}
.H {background-color:purple;}
.T {background-color:orange;}
.E {background-color:red;}
.A {background-color:lightgrey;}

HTML (for example)

<div class="protein">VHLTA</div>
<div class="protein">AVTAL</div>
<div class="protein">GGEAG</div>
<div class="protein">VHLTA</div>
<div class="protein">PWTQ</div>
We are here to answer your question about html/css, changing each letter of text? [closed] - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji