Question

尝试使用javascript将CSS样式应用于网页标题。我无法更改XMHTL的整体结构，但可以添加CSS和Java来更改外观。

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

我已经尝试过以下示例：

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

我试图将一个类添加到现有元素中以使用上面的示例。我尝试使用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>

我希望MyTitle的每个字母都使用不同的颜色。

这可以将所有文本更改为红色；例如，但我还无法分别定位每个字母。

#Header1 h1{
color: #900;
}

编辑：

标题位于带有小部件的窗口中，该小部件可能允许编辑，也可能不允许编辑。编辑它可能会破坏模板。

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

其他编辑：

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

Answer 1

使用颜色数组并将其添加到嵌入式样式

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>

Answer 2

使用您提到的示例：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>
```

Answer 3

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

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>

Answer 4

您将要利用可以轻松地将String转换为Array的事实。在您的情况下，您将使用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>");
}

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

Answer 5

尝试仅使用标签。

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

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

5 个答案: