我想让一个单词中的每个字符都有不同的颜色。 例如,谷歌徽标的每个字符具有不同颜色的外观。
word.innerHTML.charAt(0).style.color = '红色'
错误: 未捕获的类型错误:无法设置未定义的属性(设置“颜色”) 在 HTMLDocument 中。
//我尝试将其与 for 循环一起使用,但没有成功。
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>