为单个字符添加 ID答案

【问题标题】：Adding an ID to a single character为单个字符添加 ID
【发布时间】：2020-08-18 20:48:35
【问题描述】：

我正在尝试编写一个代码来更改 HTML 元素中单个字符的颜色。（例如This，我试图将元素中的 T 设为红色，而其他字符保持相同颜色）

【问题讨论】：

你需要有某种状态和某种在状态变化时将字符显示在屏幕上的方式。如果您写下您尝试过什么以及如何失败，我们可能会提供更好的帮助
@nikoss 这个问题已经很清楚地说明了大多数人不需要任何额外的代码

【解决方案1】：

您可以使用::first-letter pseudo-element。

.class1::first-letter {
  color: red;
}

&lt;div class="class1"&gt;This&lt;/div&gt;

【讨论】：

我想他希望它能够控制每一个角色

【解决方案2】：

您将需要使用first-letter 选择器。这将影响到p 元素

p::first-letter {
  color: red;
}

更多关于first-letter选择器的信息：

或者使用标题中提到的id，只需将其放在span标签中并设置一个ID：

【讨论】：

【解决方案3】：

您可以使用 JavaScript 在  标记中包围您想要的任何字符，并分别为每个跨度类设置 css，或者只进行内联样式

因此，如果您有一个带有“This”的段落，假设它具有分配给它的 ID，例如

This

然后你可以制作一个 JavaScript 函数，通过字符索引改变 HTML 元素的特定字符的颜色

function colorize (element, index, color) {
    element.innerHTML = element.innerText.substring(
        0, index
    ) + "<span style='color: " + color + "'>" + 
    element. innerText[index] + "</span>"+
     element innerText.substring(index+1)
}

然后您可以稍后在 JS 中通过按下按钮或其他方式调用它


colorize("yo",0,"red")

【讨论】：

【解决方案4】：

这里的答案很好，但你也可以使用 span 标签并给它一个唯一的 id：

<p><span id="first_letter">T</span>his</p>

那么你的 CSS 会是这样的：

#first_letter{
   color:red;
}

【讨论】：

有没有办法创建一个自动创建跨度的js函数？
是的，你可以使用 vanilla JS 或 jQuery 创建一个新的 span。这是一个堆栈溢出，讨论了如何做到这一点stackoverflow.com/questions/14725248/…