JavaScript实现打字机效果时修改末尾字符颜色报错如何解决？

你代码中的letters数组存储的是纯字符串，letters[letters.length - 1]取到的是字符串'X'，只有DOM元素才有style属性可以修改样式，普通字符串不存在style对象，因此调用lastLetter.style.color会抛出类型错误。你可以在alert和console.log中正常输出该值，是因为这两个操作只是读取字符串本身的值，没有访问不存在的style属性。

要实现单个字符修改颜色的效果，需要将目标字符用HTML标签包裹后通过innerHTML插入到DOM中，不能直接操作innerText的纯文本内容。修改后的可运行代码如下：

let textPos = document.getElementById('js-headline');
let i = 0;

function typewriter() {
  let letters = ['C', 'o', 'd', 'e', 'X'];
  if (i < letters.length) {
    textPos.innerText += letters[i];
    i++;
    setTimeout(typewriter, 1000);
  } else if (i == letters.length) {
    // 拆分已有文本，将最后一个字符用带样式的span标签包裹
    const content = textPos.innerText;
    textPos.innerHTML = `${content.slice(0, -1)}<span style="color: red;">${content.slice(-1)}</span>`;
  }
}

typewriter();

内容的提问来源于stack exchange，提问作者Marco1314