javascript - 如何设置打印到控制台的单个单词的字体颜色

Question

我编写了一个简单的打印函数，可以将一个单词逐个字母地打印到控制台中。我还想严格使用Javascript打印出不同颜色的文本，例如:

print("Hello", "green"); print(" World", "blue"); 

function print(word, color) 
    var console = document.getElementById("myConsole");
    console.style.color = color;
    console.append(word);

我希望“Hello”为绿色，“World”为蓝色，但实际情况是控制台以绿色打印“Hello”，但随后以蓝色打印“World”，同时更改颜色“你好”也变成蓝色。

我这里有一个更详细的示例:https://jsfiddle.net/Jsbbvk/vL8tLwfh/

有没有办法访问单个单词的字体颜色？

Answer 1

创建一个新元素，为其应用颜色，将该元素添加到主元素，然后附加文本

function showText(message, color, index, interval, callback) {
  if (index < message.length) {
  	var span = document.createElement('span');
    span.style.color = color;
    document.getElementById("text_target").append(span);
    span.append(message[index++]);
    setTimeout(function() {
      showText(message, color, index, interval, callback);
    }, interval);
  } else {
    callback && callback();
  }
}


showText("HELLO", "green", 0, 200, function() {
  showText(" DONE", "red", 0, 200);
});
//Hello should be green and Done should be red
//how do you set individual text colors?

<div id="msg" />
<span id="text_target"></span>