Styjun

Attempting to apply CSS styles using javascript to the title of the web page. I can't change the overall structure of the XMHTL, but I am allowed to add CSS and Java to change the appearance.

I want to apply a different color to each letter in the site's title.

I've tried this example:

https://codepen.io/tomhodgins/pen/YJZyPr

I attempted to add a class to an existing element to use the above example. I tried adding the class using a var statement and by directly altering the XML template. I've also tried a couple of other examples here that target individual letters within an element.

I need to apply individual CSS color to each individual letter in the h1 tag inside the Header1 tag.

<div class="widget Header" data-version="2" id="Header1">
<div class="header-widget">
<div>
<h1>
MyTitle
</h1>
</div>
<p>
</p>
</div>
</div>

I want each letter of MyTitle to be a different color.

This works to change all the text to red; for example, but I haven't been able to target each letter individually yet.

#Header1 h1
color: #900;

EDIT:

The title is located with a widget which may or may not allow editing. Editing it may corrupt the template.

<b:section id='header' name='Header' showaddelement='false'>
 <b:widget id='Header1' locked='true' title='MyTitle (Header)' type='Header' visible='true'>
 <b:widget-settings>
 <b:widget-setting name='displayUrl'/>
 <b:widget-setting name='displayHeight'>0</b:widget-setting>
 <b:widget-setting name='sectionWidth'>-1</b:widget-setting>
 <b:widget-setting name='useImage'>false</b:widget-setting>
 <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
 <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
 <b:widget-setting name='displayWidth'>0</b:widget-setting>
 </b:widget-settings>
 <b:includable id='main' var='this'>
 <div class='header-widget'>
 <b:include cond='data:imagePlacement in &quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;' name='image'/>
 <b:include cond='data:imagePlacement not in &quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;' name='title'/>
 <b:include cond='data:imagePlacement != &quot;REPLACE&quot;' name='description'/>
 </div>
 <b:include cond='data:imagePlacement == &quot;BEHIND&quot;' name='behindImageStyle'/>
 </b:includable>
 <b:includable id='behindImageStyle'>
 <b:if cond='data:sourceUrl'>
 <b:include cond='data:this.image' data=' image: data:this.image, selector: &quot;.header-widget&quot; ' name='responsiveImageStyle'/>
 <style type='text/css'>
 .header-widget 
 background-position: <data:blog.locale.languageAlignment/>;
 background-repeat: no-repeat;
 
 </style>
 </b:if>
 </b:includable>
 <b:includable id='description'>
 <p>
 <data:this.description/>
 </p>
 </b:includable>
 <b:includable id='image'>
 <b:include name='super.image'/>
 <!-- If we are replacing the title, force it to render anyway, and it'll be hidden in CSS. -->
 <b:include cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='title'/>
 </b:includable>
 <b:includable id='title'>
 <div>
 <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced'/>
 <b:include name='super.title'/>
 </div>
 </b:includable>
 </b:widget>
 </b:section>

ADDITIONAL EDIT:

I forgot to mention that the site's main title is also a link to the home page. The original answer below did not take this link into account thus the link was removed. I modified the original answer by reinserting the link to the home page. The code below uses a dummy URL.

<script>
const h1 = document.querySelector('#Header1 h1'),
 colors = ['#E53238', '#0064D3', '#F5AF02', '#86B817'];

const html = h1.textContent.trim().split('').map((s, i)=>
 return `<span style="color:$colors[i % colors.length]">$s</span>`
).join('')

h1.innerHTML = "<a href="https://mybigcoolsitetosee.com/">" + html + "</a>"
</script>

Using an array of colors and adding them to inline style

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>

Using this example as you mentioned: https://codepen.io/tomhodgins/pen/YJZyPr

But instead of setting

h1.letter[--nth-letter="1"] background: red; 
h1.letter[--nth-letter="2"] background: orange; 

set it as

h1.letter[--nth-letter="1"] color: red; 
h1.letter[--nth-letter="2"] color: orange; 

and so on...

However, if you can't change the html in anyway you could do it with pure javascript like:

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

You can put this code to your source, and change it what you want

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

And also this code:

<div id="Header1">
 <h1>
 MyTitle
 </h1>
</div>

You're going to want to take advantage of the fact that you can easily convert a String into an Array.
In your case you're going to use jQuery (or vanilla js such as getElementById() ) to grab the text you want to style, and then use javascript to iterate through the string and assign a new color to each one.

For example:

var a = $("h1").text();
$("h1").empty();
for(var i = 0; i < a.length; i++)
 $("h1").append("<span class = 'color"+i+"'>"+a[i]+"</span>");

https://jsfiddle.net/crt829fp/2/

Try to use the tag only.

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