如何让单词中的每个字符具有不同的颜色？

Question

我想将单词中的每个字符设置为不同的颜色，就像 Google 徽标一样。

这是我尝试过的（循环），但它不起作用：

word.innerHTML.charAt(0).style.color = 'red'

此代码会生成错误：

Uncaught TypeError: Cannot set properties of undefined (setting 'color') at HTMLDocument.

Answer 1

innerHTML

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

<span>

中：

const text = 'Hello world 😊 !';
const colors = 'red orange yellow green skyblue blue darkviolet'.split(' ');

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

#\$div{
  font-size:30px;
  display:flex;
  gap:4px;
}
#\$div span{
  padding: 0 5px;
  border-radius:4px;
  min-width:16px;
  text-align:center;
}

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