时间戳

首页 > 解决方案 > 用javascript改变单个字符的颜色

javascript - 用javascript改变单个字符的颜色

问题描述

因为我无法将 HTML 添加到标题标签，所以我需要使用 Javascript 来更改单个字符的颜色。我正在使用以下代码，效果很好，但它仅将更改应用于第一个而不是以下代码。

const element = document.querySelector('h1');
element.innerHTML = element.innerHTML.replace('.', '<span style="color: red;">.</span>');
<h1>Hello.</h1>

<h1>Hello.</h1>

<h1>Hello.</h1>

我只是找不到更改代码的解决方案，因此它适用于每个标头。

标签： javascript

解决方案

只需使用querySelectorAll并迭代NodeList您从中获得的使用for ... of：

const h1s = document.querySelectorAll('h1');
for (const h1 of h1s) {
  h1.innerHTML = h1.innerHTML.replace('.', '<span style="color: red;">.</span>');
}
<h1>Hello.</h1>

<h1>Hello.</h1>

<h1>Hello.</h1>

您也可以使用forEach（这是 的一部分Array.prototype，因此您首先需要将您的NodeList转换为Array）：

const h1s = document.querySelectorAll('h1');
Array.from(h1s).forEach((h1) => {
  h1.innerHTML = h1.innerHTML.replace('.', '<span style="color: red;">.</span>');
})
<h1>Hello.</h1>

<h1>Hello.</h1>

<h1>Hello.</h1>

最后但并非最不重要的一点是，您可以使用旧的索引 for 循环：

const h1s = document.querySelectorAll('h1');
for (let i = 0; i < h1s.length; i++) {
  h1s[i].innerHTML = h1s[i].innerHTML.replace('.', '<span style="color: red;">.</span>');
}
<h1>Hello.</h1>

<h1>Hello.</h1>

<h1>Hello.</h1>

推荐阅读