Как раскрасить каждое слово заголовка?

214
21 марта 2018, 03:24

Как раскрасить каждое слово заголовка h2 в разный цвет с помощью css?

Answer 1

Через css только если каждое слово обернуто в тэг

Answer 2

Можно сделать с помощью такого простого JavaScript-а.

var colors = ["red", "blue", "green", "orange", "olive"]; 
var el = document.getElementById("h") 
var arr = el.innerText.split(" "); 
var str = ""; 
var i = 0; 
 
for (var word of arr) { 
  str += ` <span style="color:${colors[i++ % colors.length]}">${word}</span>`; 
} 
 
el.innerHTML = str;
<h2 id="h">Всем привет, с вами говорит рыжий кот!</h2>

READ ALSO
Как сделать border для маркера?
CSS

Как сделать border для маркера?

В списке под каждым li стоит border-bottom, но он не распространяется на маркерМожно ли как то подчеркнуть li вместе с маркером?

 194
Как сверстать две колонки на CSS
CSS

Как сверстать две колонки на CSS

Как сделать такое на CSS? мне приходит только table использовать, но мне кажется это не лучшая идея

 218
Анимация на кнопке,помощь
CSS

Анимация на кнопке,помощь

http://akar-grouppcom/ Анимация есть на всех кнопках, пульсация постоянная прозрачная

 247
Косяк с полосой
CSS

Косяк с полосой

Рылся-рылся в стилях, ничего не получаетсяДобавьте 2 товара в корзину, именно 2 товара и перейдите в саму корзину в моб

 178