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

问题描述 投票:0回答:1

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

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

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

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

javascript html css colors character
1个回答
0
投票

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>

© www.soinside.com 2019 - 2024. All rights reserved.