如何选中并修改文本指定部分？实现定时切换“block”文字颜色

要只让“block”单词每2秒切换颜色，核心是把目标单词单独用可定位的标签包裹，再针对性修改样式，具体步骤如下：

• 修改HTML结构：把需要变色的“block”用<span>标签包裹，并给这个span设置唯一id，方便JS选择。同时修正原h1标签的id（原id含空格，容易导致选择器失效）：

  <h1 id="header">This is my header <span id="target-block">block</span></h1>
  

• 调整JavaScript代码：修正原代码里的变量名错误（原定义colorss却使用colors），然后把选择器指向包裹“block”的span，再优化颜色循环逻辑：

  const colors = ["blue", "green", "pink", "purple"];
  let curColor = 0;
  
  function changeColor() {
      const targetElement = document.querySelector("#target-block");
      targetElement.style.color = colors[curColor];
      curColor = (curColor + 1) % colors.length; // 取余逻辑自动适配数组长度，不用手动判断边界
      setTimeout(changeColor, 2000);
  }
  
  setTimeout(changeColor, 2000);
  

补充说明 #

• 用<span>包裹目标单词是因为它是行内元素，不会破坏原有的文本排版；
• 原h1的id包含空格，不符合HTML id的规范（id不能包含空格），修正后能避免选择器失效的问题。

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