如何設置打印到控制檯的單個字的字體顏色

我編寫了一個簡單的打印功能，可逐字母打印到控制檯中。我也想打印出與嚴格使用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」的顏色改爲藍色。

我有一個更詳細的例子在這裏：https://jsfiddle.net/Jsbbvk/vL8tLwfh/

是否有訪問個別字的字體顏色的方法嗎？

來源

2017-07-31 Jsbbvk

所以你需要創建個人元素。 – epascarello

創建另一個元素並將其附加到它。然後將該元素附加到控制檯。

在下面的代碼片段，我改變了變量名控制檯，因爲它已經在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>

來源

2017-07-31 18:52:32

創建一個新的元素，色彩運用它，添加元素你的主元素，然後附加文字

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>

來源

2017-07-31 18:55:31

如何設置打印到控制檯的單個字的字體顏色

回答

相關問題