javascript - html/css，更改每个文本字母？

Question

是否可以更改文本中每个字母的颜色，例如，我在屏幕上打印标签文本，我想迭代每个字母，检查其值并相应地更改其颜色，是否可以使用 html/css或 javascript 添加标签（或者如果 js 有一个已经这样做的库），如下图所示，正如您所注意到的，每个字母都有自己的颜色

_{（来源：clcbio.com）}

Answer 1

我认为你想要的应该是可能的。它需要一些硬编码来预先定义不同的颜色。使用循环期间定义的值作为新生成的跨度的类，您可以使用模数来应用所需的颜色类。我没有关于您的文本如何与确定所需颜色的值相关的信息，所以这是我能想到的最好的：

var colors = ['red','blue','green','orange'];
var text = document.querySelector('.text').innerHTML;
var length = text.length;
for ( i = 0; i < length; i++ ) {
    var span = document.createElement('span');
    span.className = 'coloredText '+(i + 1);
    span.innerHTML = text[i];
    document.body.appendChild(span);
}

var list = Array.prototype.slice.call(document.querySelectorAll('.coloredText'));
var listLength = list.length;

for ( j = 0; j < listLength; j++ ) {
    var number = list[j].className.split(" ")[1] % 4;
    console.log(number);
    console.log(colors[number]);
    list[j].className = list[j].className += ' ' + colors[number];
}

简单地从一串文本动态生成具有不同颜色的跨度的工作示例：http: //jsfiddle.net/Kxgbb/

Answer 2

使用 id 并在 javascript 中通过 document.getElementById('yourId') 或 document.getElementsByTagName('HTMLTag') 进行迭代。您可以采用随机颜色并使用条件设置颜色。

Answer 3

每个字母都需要包含在 aSPAN和 CSS 类名称中，以便按照您想要的方式设置它们的样式。

Answer 4

使用 javascript 创建跨度并使用 css 设置跨度样式：http: //codepen.io/bhlaird/pen/Jdiye

Javascript

$('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>';
        }
        $(this).html(result);
    });
});

CSS

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

HTML（例如）

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

Answer 5

您应该考虑使用这个 JS 插件：Lettering.js 它完全符合您的要求。您可以按字母、单词、行或以上任意组合拆分任何文本块。它会自动为每个 span 生成类名，从而可以轻松地使用 CSS 或 JS 定位它们，然后应用特定的样式。