Название сайта - применять разные цвета к каждой букве
Начиная с jQuery 1.7, вы должны использовать jQuery.fn.on :
$(staticAncestors).on(eventName, dynamicChild, function() {});
До этого рекомендуется использовать live() :
$(selector).live( eventName, function(){} );
Однако live() устарел в 1.7 в пользу on() и полностью удален в 1.9. Подпись live():
$(selector).live( eventName, function(){} );
... может быть заменена следующей on() сигнатурой:
$(document).on( eventName, selector, function(){} );
Например, если ваша страница динамически создавала элементы с именем класса dosomething, вы привязывали бы событие к родительскому, который уже существует (здесь есть нуль проблемы, вам нужно что-то, что существует для привязки, не привязка к динамическому контенту), это может быть (и самый простой вариант) - document. Хотя иметь в виду document, возможно, не самый эффективный вариант .
$(document).on('mouseover mouseout', '.dosomething', function(){
// what you want to happen when mouseover and mouseout
// occurs on elements that match '.dosomething'
});
Любой родитель, который существует в момент привязки события, прекрасен. Например,
$('.buttons').on('click', 'button', function(){
// do something here
});
применимо к
5 ответов
Использование массива цветов и добавление их во встроенный стиль.
Используя этот пример, как вы упомянули: https://codepen.io/tomhodgins/pen/YJZyPr
Но вместо настройки
h1.letter[--nth-letter="1"] { background: red; }
h1.letter[--nth-letter="2"] { background: orange; }
установите его как
h1.letter[--nth-letter="1"] { color: red; }
h1.letter[--nth-letter="2"] { color: orange; }
и так далее ...
Однако, если вы все равно не можете изменить html, вы можете сделать это с помощью чистого JavaScript, например:
var title = document.querySelector('h1'),
options = ['blue', 'orange', 'yellow', 'green', 'brown', 'red', 'yellow'];
var result = title.textContent.trim().split('').map((color, i)=>{
return `<span style="color:${options[i % options.length]}">${ color }</span>`
}).join('')
title.innerHTML = result```
<div class="widget Header" data-version="2" id="Header1">
<div class="header-widget">
<div>
<h1>
MyTitle
</h1>
</div>
<p>
</p>
</div>
</div>
```Попробуйте использовать только тег.
<h1>
<span style='color: blue'>T</span>
<span style='color: green'>E</span>
<span style='color: yellow'>S</span>
<span style='color: blue'>T</span>
<span style='color: black'>E</span>
<span style='color: red'>R</span>
</h1>Вы можете поместить этот код в исходный код и изменить его так, как хотите
const h1 = document.querySelector('#Header1 h1'),
colors = ['red', 'green', 'blue', 'orange', 'purple', 'pink', 'yellow'];
const html = h1.textContent.trim().split('').map((s, i)=>{
return `<span style="color:${colors[i % colors.length]}">${s}</span>`
}).join('')
h1.innerHTML = html
А также этот код:
<div id="Header1">
<h1>
MyTitle
</h1>
</div>
Вы захотите воспользоваться тем, что можете легко преобразовать строку в массив. В вашем случае вы собираетесь использовать jQuery (или ванильные js, такие как getElementById ()), чтобы захватить текст, который вы хотите стилизовать, а затем использовать javascript, чтобы перебрать строку и назначить новый цвет каждому.
Например:
var a = $("h1").text();
$("h1").empty();
for(var i = 0; i < a.length; i++){
$("h1").append("<span class = 'color"+i+"'>"+a[i]+"</span>");
}