Javascript 网站标题-对每个字母应用不同的颜色

正在尝试使用Javascript将CSS样式应用于网页标题。我不能改变XMHTL的整体结构，但我可以添加CSS和Java来改变外观

我想对网站标题中的每个字母应用不同的颜色

我试过这个例子：

我尝试向现有元素添加一个类以使用上面的示例。我尝试使用var语句和直接修改XML模板来添加该类。我还尝试了其他几个例子，它们针对元素中的单个字母

我需要对Header1标记内的h1标记中的每个字母应用单独的CSS颜色

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

编辑：

标题与小部件一起定位，小部件可能允许编辑，也可能不允许编辑。编辑它可能会损坏模板

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

0
-1
假的
假的
在…的后面
0
.标题小部件{
背景位置：；
背景重复：无重复；
}

附加编辑：

我忘了提到网站的主标题也是主页的链接。下面的原始答案没有考虑此链接，因此该链接被删除。我通过重新插入到主页的链接修改了原始答案。下面的代码使用虚拟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>

const h1=document.querySelector（“#Header1 h1”），
颜色=['#E53238'、'#0064D3'、'#F5AF02'、'#86B817']；
const html=h1.textContent.trim（）.split（“”）.map（（s，i）=>{
返回`${s}`
}).加入（“”）
h1.innerHTML=“”

使用您提到的示例：

但不是设置

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'），
选项=[‘蓝色’、‘橙色’、‘黄色’、‘绿色’、‘棕色’、‘红色’、‘黄色’]；
var result=title.textContent.trim（）.split（“”）.map（（颜色，i）=>{
返回`${color}`
}).加入（“”）
title.innerHTML=结果

```
我的头衔


```

试着只使用标签

T
E
s
T
E
R

使用颜色数组并将其添加到内联样式

const h1=document.querySelector（'Header1 h1'），
颜色=[‘红色’、‘绿色’、‘蓝色’、‘橙色’、‘紫色’、‘粉色’、‘黄色’]；
const html=h1.textContent.trim（）.split（“”）.map（（s，i）=>{
返回`${s}`
}).加入（“”）
h1.innerHTML=html

我的头衔

您需要利用这样一个事实，即可以轻松地将字符串转换为数组。 在本例中，您将使用jQuery（或像getElementById（）这样的vanilla js）获取要设置样式的文本，然后使用javascript迭代字符串并为每个字符串指定新的颜色

例如：

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

var a=$（“h1”）.text（）；
$（“h1”）.empty（）；
对于（变量i=0；i

---

您可以将此代码放到源代码中，并根据需要进行更改

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

const h1=document.querySelector（'Header1 h1'），
颜色=[‘红色’、‘绿色’、‘蓝色’、‘橙色’、‘紫色’、‘粉色’、‘黄色’]；
const html=h1.textContent.trim（）.split（“”）.map（（s，i）=>{
返回`${s}`
}).加入（“”）
h1.innerHTML=html

还有这个代码：

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

我的头衔

Question没有标记为jquery为了让它起作用，我需要在XHTML模板内的h1标记上应用一个新的“字母”类，这似乎是不可能的。我试图使用element.classList.add添加该类，但没有成功。我还将这个类添加到了标题模板的区域中，但没有起作用。只是添加了一个解决方案，在H1标记中使用纯JS。。。也许这对你有用。OP明确指出“我不能改变XMHTL的整体结构”，我认为这是不可能的，因为标题在XHTML模板的小部件中，所以我需要在事后覆盖它。简单的解决方案通常是最好的，但我对此投了反对票，因为它不能回答问题。很好的尝试。与我考虑的答案非常相似，但是（依我看），随机分配颜色会更有趣。刚刚从@charlietfl看到这个解决方案，它与我在答案中包含的非常相似，实际上，要使颜色随机，可以更改数组中变量的collor名称，如：var color01='#'+（Math.random（）*0xFFFFFFFFFFThank，很好用。脚本放在head标记内时不起作用。我需要将它放在模板所有内容的下方，刚好在标记上方，以便覆盖模板的代码。感谢您的回复！

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