コンソールに印刷された個々の単語のフォント色を設定する方法

Question

手書きの単語をコンソールに出力する簡単な印刷機能を作成しました。

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

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

は私が青であることを「世界」緑にとするために、「こんにちは」たいと思いますが、代わりに何が起こるかは、コンソール版画です：私はまた、例えば、厳密にJavascriptを使用して、異なる色でテキストを印刷したいです"Hello"の色を緑色に変更しながら、 "World"を青色で印刷します。

私はここで、より精巧な例があります：https://jsfiddle.net/Jsbbvk/vL8tLwfh/

は、個々の単語のフォントの色にアクセスする方法はありますか？

Answer 1

別の要素を作成し、それに単語を追加します。要素をコンソールに追加します。それはすでに

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>

Answer 2

が、それに色を適用し、新しい要素を作成し、その要素を追加するJavaScriptで意味を持っているので、以下のスニペットで

は、私は、変数名のコンソールを変更しましたあなたの主な要素には、テキストを追加

function showText(message, color, index, interval, callback) { 
 
    if (index < message.length) { 
 
    \t 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>