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

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"，同时将"Hello"的颜色更改为蓝色。

我这里有一个更详细的例子：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>

Answer 2

创建另一个元素并将单词附加到其中。 然后将元素追加到控制台。

在下面的代码片段中，我更改了变量名称控制台，因为它在 JavaScript 中已经有了含义

print("Hello", "green");
print(" World", "blue"); 
function print(word, color){
var conso = document.getElementById("myConsole");
var span = document.createElement('span');
span.style.color = color;
span.append(word);
conso.append(span);
}

<div id="myConsole"></div>