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

html/css, changing each letter of text?(Html/css，更改每个文本字母？)

问题描述

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

_{(来源：clcbio.com)}

推荐答案

使用Java脚本创建跨度并使用css：http://codepen.io/bhlaird/pen/Jdiye

设置跨度样式

Java脚本

$('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>

这篇关于Html/css，更改每个文本字母？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！