Question

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

http://www.clcbio.com/wp-content/uploads/2012/08/seq_alignment_31.png

Answer 1

每个字母都需要包含在SPAN和CSS类名中，以便按照自己的方式设置样式。

Answer 2

使用id并在javascript中使用document.getElementById（＆＃39; yourId＆＃39;）或document.getElementsByTagName（＆＃39; HTMLTag＆＃39;）进行迭代。您可以使用随机颜色并使用条件设置颜色。

Answer 3

使用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 4

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

Answer 5

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

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/

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

5 个答案: