如何将颜色更改为数组字符串中的特定单词？ ：Javascript / jQuery [关闭]

Question

我在网站横幅上有一个标题，它将以给定的时间间隔显示（标题在数组中声明）。

我想更改字符串集中特定单词的颜色。比如，想改变Lucky、Vasudeva、Krishna的颜色。

var caption = document.getElementById('caption');
var text = ['Ajay garidipuri lucky ', 'Vasudeva Vijay', 'Mude krishna unlucky '];

function display(i) {
  if (i >= text.length) {
    i = 0;
  }
  caption.innerHTML = text[i];
  setTimeout(function() {
    display(i + 1)
  }, 6000)
}
display(0)

.content-video h1 {
  font-size: 52px;
  margin-bottom: 6px;
  text-align: center;
  color: white;
  padding-top: 25%;
  padding-left: 0%;
  padding-right: 3%;
  font-weight: bold;
  text-shadow: 2px 2px 4px #000000;
}

#caption {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

<div class="content-video">
  <h1><span id="caption"> </span></h1>
</div>

提前致谢！

Answer 1

嗯.. 据我所知，现在有办法改变字符串中特定单词的样式，除非你用它自己的标签（比如 or ）包装你的单词，并给这个标签一个颜色的样式/类你想要的。

这意味着您需要在其中附加一个内部 <span> 或其他标签，而不是这样做：caption.innerHTML = text[i];。

所以你最终的 HTML 应该是这样的：

<span id="caption"> Ajay garidipuri <span class='lucyColor'>lucky</span></span>