【问题标题】：Color every character differently给每个角色涂上不同的颜色
【发布时间】：2020-09-13 02:32:48
【问题描述】：

我正在使用 KK Countdown 为网站倒计时圣诞节。

我有一个我必须遵循的设计，它使当日countown 的每个字母都具有蓝色背景和边框半径。

现在html是这样输出的

<span class="kkcount-down" data-time="1387929600">
     <span class="kkcountdown-box">
          <span class="kkc-dni">169</span>
          <span class="kkc-dni-text">DAYS </span>
          <span class="kkc-godz">23</span>
          <span class="kkc-godz-text"> </span>
          <span class="kkc-min">19</span>
          <span class="kkc-min-text"> </span>
          <span class="kkc-sec">48</span>
          <span class="kkc-sec-text">HOURS</span>
     </span>
</span>

kkc-dni 类是我在这里尝试定位的部分。

我想为该范围内的每个字母添加背景颜色。

最好使用 CSS。这可能吗？

我之前使用 CSS 来设置段落首字母的样式，但这完全不同，我找不到任何相关信息。

有什么建议吗？

注意：因为我使用插件来执行此倒计时，我不确定是否可以更改它输出跨度和 html 的方式。如果我可以将每个字母都包装在一个跨度中，我会的。

【问题讨论】：

我认为仅使用 CSS 是不可能的。你有:first-letter 伪元素...但是每个字母，我认为这是不可能的。
你必须获取 span jQuery('.kkc-dni').html() 的内容，然后遍历每个字母 String.split("")，然后添加每个字母到自己的跨度。要进一步解释，必须更多地了解您希望如何为每个字母着色
谢谢 Marc，是的，我认为这可以通过一些 jQuery 实现。希望每个字符都有一个 CSS 选择器
如果字体是固定宽度的，你也可以做一些聪明的事情。你可以用你需要的颜色制作背景图片。
感谢 Marc，我想我会做一些 jQuery 并包装每个字符。感觉我有更多的控制权，而不是图像。好主意！

标签： javascript jquery css

【解决方案1】：

我想为该范围内的每个字母添加背景颜色。

使用颜色数组：

const colors = ["#0bf", "#f0b", "#fb0", "#b0f"];

$('.kkc').find('span').each(function() {

  const text = $(this).text();
  const len = text.length;
    
  const newCont = [...text].reduce((a, ch, i) => 
    a + `<span style="background:${colors[i % colors.length]}">${ch}</span>`, ""
  );

  $(this).html(newCont);

});

.kkcountdown-box>span>span {
  background: red;
}

<div class="kkc">
  <span class="kkc-dni">169</span>
  <span class="kkc-dni-text">DAYS </span>
  <span class="kkc-godz">23</span>
  <span class="kkc-godz-text"> </span>
  <span class="kkc-min">19</span>
  <span class="kkc-min-text"> </span>
  <span class="kkc-sec">48</span>
  <span class="kkc-sec-text">HOURS</span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

以上将每个字母包装成单独的span 也会从您的颜色数组列表中添加背景颜色。
一旦到达颜色列表末尾，将从第一个开始，依此类推。

使用随机颜色：

$('.kkc').find('span').each(function() {

  const text = $(this).text();
  const len = text.length;
    
  const newCont = [...text].reduce((a, ch, i) => {
    const color= '#'+ (Math.random() * 0xffffff).toString(16).substr(-6); 
    return a + `<span style="background:${color}">${ch}</span>`
  }, "");

  $(this).html(newCont);

});

.kkcountdown-box>span>span {
  background: red;
}

<div class="kkc">
  <span class="kkc-dni">169</span>
  <span class="kkc-dni-text">DAYS </span>
  <span class="kkc-godz">23</span>
  <span class="kkc-godz-text"> </span>
  <span class="kkc-min">19</span>
  <span class="kkc-min-text"> </span>
  <span class="kkc-sec">48</span>
  <span class="kkc-sec-text">HOURS</span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

上面将获取<span> 中的每个字母，并将其包装成具有随机生成背景颜色的新span。

【讨论】：

看起来不错，只是它不仅仅针对数字，而且我正在尝试针对数字。现场演示虽然有效，但我认为这与 kkcountdown 相关
还是不行。已经制作了一个 jsBin，但它没有输出它在我的页面上的作用jsbin.com/oranep/1/edit
@ChrisG-Jones 看看你是否无法创建演示，然后创建一个 fn 并将我的代码放入其中。在插件内部执行该功能。
这是我在我的网站上看到的jsbin.com/oranep/4 猜测这与倒计时插件有关。用不同的实例玩过你的代码，它工作正常。就像数字是从某个地方拉进来的，不能用你的代码或其他东西作为目标……它们会在页面上实时更新，这可能与它有关吗？已将此标记为已回答，因为它可以满足我的要求，但在我的实例中不起作用。感谢您的帮助
@ChrisG-Jones 这些数字是在 SPAN 中作为 TEXT 创建的，因此无论数字是否更改，SPAN 都是相同的。所以取消插件并玩弄。 c变量是创建的SPAN，你可以在插件里面定位它。

【解决方案2】：

如果不单独包装字符，您将无法设置每个单词的字母样式。这是问题的简单答案，尤其是在标题中提出的问题。

但是，包装可以使用服务器端脚本或客户端脚本来完成。如果这是可以接受的，您应该重新提出您的问题。

【讨论】：

【解决方案3】：

假设您不想为每个字母赋予不同的背景颜色，您可以像这样为每个跨度指定 CSS：

.kkc-dni {background-color: red;}

此处示例：http://jsfiddle.net/jfriend00/WAPds/

如果您希望每个字母具有不同的背景颜色或其他独特的 CSS，那么您必须将每个字母包装在其各自的跨度中。如果您无法控制生成的 HTML，您可以使用 JS 以编程方式完成。

【讨论】：

但他想要每个字母的背景：“我想为该跨度内的每个字母添加背景颜色。”
@leoMestizo - 他并没有说他想给每个字母一个不同的背景颜色。他只是说他想给每个人一个背景颜色。如果不将它们分开包装，就不能为每个字母赋予不同的颜色。我已经更新了我的答案，以便更清楚地解释我是如何解释这个问题的。
@jfriend00 我担心的不是颜色不同，而是因为每个角色都有自己的边框半径。因此，如果您在跨度周围有一个边框半径，这与让每个字符都有自己的边框半径和它们之间的一些间距是不同的效果。
@ChrisG-Jones - 那么您将不得不单独包装每个字母。 Border-radius 不是字体属性。这是一个元素属性。
如果您只想使用 CSS 为每个字母添加边框而不修改标记，这是不可能的。