Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.11.2010, 15:46
Интересующийся
Отправить личное сообщение для krol Посмотреть профиль Найти все сообщения от krol
 
Регистрация: 08.08.2010
Сообщений: 21

Разноцветный текст с помощью jquery
Есть некий текст в заголовке H1 ну жно сделать так чтобы текст в нем был разноцветным тоесть мне нужно сделать так чтобы каждой букве расположенной между тегами <h1></h1> задавался класс например первой букве class="green" второй class="red" b так далее
Ни кто не подскажет как это сделать?
Ответить с цитированием
  #2 (permalink)  
Старый 29.11.2010, 16:09
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 29.11.2010, 23:44
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

удалено.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.

Последний раз редактировалось Gozar, 02.02.2011 в 14:21.
Ответить с цитированием
  #4 (permalink)  
Старый 30.11.2010, 09:58
Интересующийся
Отправить личное сообщение для krol Посмотреть профиль Найти все сообщения от krol
 
Регистрация: 08.08.2010
Сообщений: 21

Спасибо exec этот вариант подходит, но возникает следующая проблема. у меня несколько заголовков на странице как можно сделать тоже самое но без указания getElementById("f")
Ответить с цитированием
  #5 (permalink)  
Старый 30.11.2010, 10:48
Аватар для Snipe
Профессор
Отправить личное сообщение для Snipe Посмотреть профиль Найти все сообщения от Snipe
 
Регистрация: 06.05.2008
Сообщений: 765

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

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

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

Последний раз редактировалось Snipe, 30.11.2010 в 11:08.
Ответить с цитированием
  #6 (permalink)  
Старый 30.11.2010, 11:05
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

krol,

(function () {
	var nodes = document.getElementsByTagName("H1");
	for (var i = 0; i < nodes.length; i++)
		rasta(nodes[i]);
})();
Ответить с цитированием
  #7 (permalink)  
Старый 30.11.2010, 11:07
Аватар для Snipe
Профессор
Отправить личное сообщение для Snipe Посмотреть профиль Найти все сообщения от Snipe
 
Регистрация: 06.05.2008
Сообщений: 765

Сообщение от exec Посмотреть сообщение
Просто rasta(this).
Если не ошибаюсь, просто this передаст jquery-объект, а не дом-элемент.
Ответить с цитированием
  #8 (permalink)  
Старый 30.11.2010, 11:09
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

<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>
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Вопрос: И опять про offsetLeft... sigurd Общие вопросы Javascript 11 04.10.2010 13:06
lastChild работает в IE, как тут быть? Puaris83 Firefox/Mozilla 4 17.04.2010 22:56
раскрывающийся текст sc2r2bey Элементы интерфейса 14 26.03.2010 11:40
Вопрос по относительному позиционированию DIV XPOMOB (X)HTML/CSS 11 15.07.2009 16:02