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>

Answer 2

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

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

2 个答案: