我想让单词中的每个字符都有不同的颜色。我准备使用JS或纯CSS

Question

我想让一个单词中的每个字符都有不同的颜色。 例如，谷歌徽标的每个字符具有不同颜色的外观。

word.innerHTML.charAt(0).style.color = '红色'

错误： 未捕获的类型错误：无法设置未定义的属性（设置“颜色”） 在 HTMLDocument 中。

//我尝试将其与 for 循环一起使用，但没有成功。

Answer 1

innerHTML

是一个字符串，您无法为字符串着色，但您可以将其拆分为字符并将每个字符包装到具有背景颜色的

<span>

中：

const word = 'Hello world 😊 !';
const colors = 'red orange yellow green lightblue blue violet'.split(' ');

let colorIdx = 0;
$div.innerHTML = [...word].map(c => `<span style="background-color:${colors[colorIdx === colors.length ? colorIdx = 0 : colorIdx++]}">${c}</span>`).join('');

#\$div{
  font-size:30px;
  letter-spacing:5px;
}

<div id="$div"></div>