Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Разноцветный текст с помощью jquery (https://javascript.ru/forum/jquery/13462-raznocvetnyjj-tekst-s-pomoshhyu-jquery.html)

krol 29.11.2010 16:46

Разноцветный текст с помощью jquery
 
Есть некий текст в заголовке H1 ну жно сделать так чтобы текст в нем был разноцветным тоесть мне нужно сделать так чтобы каждой букве расположенной между тегами <h1></h1> задавался класс например первой букве class="green" второй class="red" b так далее
Ни кто не подскажет как это сделать?

exec 29.11.2010 17:09

<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>

Gozar 30.11.2010 00:44

удалено.

krol 30.11.2010 10:58

Спасибо exec этот вариант подходит, но возникает следующая проблема. у меня несколько заголовков на странице как можно сделать тоже самое но без указания getElementById("f")

Snipe 30.11.2010 11:48

document.body.getElementsByTagName('h1')
вернет массив всех тегов h1 на странице

в jQuery как-то так
$('h1').each(function() {rasta(this.html)});

Только соответственно переписать rasta сразу под работу со строкой, а не элементом.

exec 30.11.2010 12:05

krol,

(function () {
	var nodes = document.getElementsByTagName("H1");
	for (var i = 0; i < nodes.length; i++)
		rasta(nodes[i]);
})();

Snipe 30.11.2010 12:07

Цитата:

Сообщение от exec (Сообщение 81518)
Просто rasta(this).

Если не ошибаюсь, просто this передаст jquery-объект, а не дом-элемент.

exec 30.11.2010 12:09

<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, время: 17:12.