""""""""
尝试这种方式，它应该理想地工作。

对于contenteditable元素来说，这是可能的。总结一下，你可以使用contenteditable属性将任何元素转换成类似于textarea的元素。contenteditable属性允许你输入一个<p>标签，如下所示：

<p contenteditable="true" id="changeColor">
    Click <span style="color:red">to</span> type
</p>

因为contenteditable元素不是textarea，你可以在里面添加实际的代码。使用contenteditable<p>标签，你可以插入你在问题中展示的<span>标签，并使用CSS设置它的颜色。在我对类似问题的回答中可以找到一个很好的例子和更多的解释。

chatTextBox.value = 'hi';
chatTextBox.style.color = 'red';

现在，如果你想有许多不同颜色的文本，你不能使用一个文本区域，你必须使用某种contenteditable元素。

可通过以下方式访问样式：

document.getElementById("chatTextBox").style.visibility = 'hidden';
document.getElementById('chatTextBox').innerHTML = "Hello";

我不知道这是否是你想要的，但看看这个Codepen!它会随机改变输入框的颜色。下面是HTML：

<div style="height:150px">
  <h1>Type in the Input BOX below and see changing colors as you type!!</h1>
  <br><br>
  <input type="text" id="multi" style="width:100%; height:100px; font-size:26px;" onkeydown="myFunction()">
</div>

下面是JS：

var myArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']; 
function myFunction(){
var rand = myArray[Math.round(Math.random() * (myArray.length - 1))];
var rand1 = myArray[Math.round(Math.random() * (myArray.length - 1))];
var rand2 = myArray[Math.round(Math.random() * (myArray.length - 1))];
var rand3 = myArray[Math.round(Math.random() * (myArray.length - 1))];
var rand4 = myArray[Math.round(Math.random() * (myArray.length - 1))];
var rand5 = myArray[Math.round(Math.random() * (myArray.length - 1))];

document.getElementById("multi").style.color = '#'+rand+rand1+rand2+rand3+rand4+rand5;
}

• • 附言**。我是java脚本的新手，但我尝试过帮助!

<script>
    const mg = document.getElementById("demo");
    mg.innerHTML = "Hello World";
    mg.style.color = "blue";
</script>