Разноцветный текст с помощью jquery
Есть некий текст в заголовке H1 ну жно сделать так чтобы текст в нем был разноцветным тоесть мне нужно сделать так чтобы каждой букве расположенной между тегами <h1></h1> задавался класс например первой букве class="green" второй class="red" b так далее
Ни кто не подскажет как это сделать? |
<h1 id='f'> Some text </h1> <script type="text/javascript"> function rasta(element) { var result = ""; for (var i = 0; i < element.innerHTML.length; i++) { result += "<span style='color: rgb(" + ~~(Math.random() * 255) + ", " + ~~(Math.random() * 255) + ", " + ~~(Math.random() * 255) + ")'>" + element.innerHTML.charAt(i) + "</span>" } element.innerHTML = result; } rasta(document.getElementById("f")); </script> |
удалено.
|
Спасибо exec этот вариант подходит, но возникает следующая проблема. у меня несколько заголовков на странице как можно сделать тоже самое но без указания getElementById("f")
|
document.body.getElementsByTagName('h1')вернет массив всех тегов h1 на странице в jQuery как-то так $('h1').each(function() {rasta(this.html)}); Только соответственно переписать rasta сразу под работу со строкой, а не элементом. |
krol,
(function () { var nodes = document.getElementsByTagName("H1"); for (var i = 0; i < nodes.length; i++) rasta(nodes[i]); })(); |
Цитата:
|
<h1> Первый заголовок </h1> <h1> Второй заголовок </h1> <h1> Третий заголовок </h1> <script type="text/javascript"> function rasta(element) { var result = ""; for (var i = 0; i < element.innerHTML.length; i++) { result += "<span style='color: rgb(" + ~~(Math.random() * 255) + ", " + ~~(Math.random() * 255) + ", " + ~~(Math.random() * 255) + ")'>" + element.innerHTML.charAt(i) + "</span>" } element.innerHTML = result; } var nodes = document.getElementsByTagName("H1"); for (var i = 0; i < nodes.length; i++) rasta(nodes[i]); </script> |
Часовой пояс GMT +3, время: 15:55. |