html/css, меняя каждую букву текста?

Можно ли изменить цвет каждой буквы текста, например, я печатаю на экране в тексте тегов, и я хочу перебрать каждую букву, проверить ее значение и соответственно изменить ее цвет, это возможно при использовании html / css или javascript для добавления тегов (или если js имеет библиотеку, которая уже это делает), что-то вроде изображения ниже, как вы заметили, каждая буква имеет свой собственный цвет

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

Источник

5 ответов

Решение

Создайте промежутки с помощью 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>
Источник

Вы должны рассмотреть возможность использования этого плагина JS: Lettering.js Он делает именно то, что вы ищете. Вы можете разбить любой текстовый блок на букву, слово, строку или любую комбинацию вышеперечисленного. Он автоматически генерирует имена классов для каждого диапазона, что облегчает нацеливание на них с помощью CSS или JS, а затем применяет определенные стили.

Источник

Каждое письмо нужно будет завернуть в SPAN и имена классов CSS, применяемые к каждому из них, чтобы стилизовать их так, как вы хотите.

Источник

Используйте id и итерируйте в javascript с document.getElementById('yourId') или document.getElementsByTagName('HTMLTag'). Вы можете взять случайные цвета и установить цвет с помощью условных обозначений.

Источник

Я думаю, что вы хотите, должно быть возможно. Это потребует немного жесткого кодирования, чтобы предварительно определить различные цвета. Используя значения, определенные во время цикла в качестве класса для вновь созданного диапазона, вы можете использовать модуль для применения нужного цветного класса. У меня нет информации о том, как ваш текст соотносится со значением, определяющим желаемый цвет, так что это лучшее, что я могу придумать:

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/

Источник
Другие вопросы по тегам