innerHTML并改变颜色

Question

chatTextBox.innerHTML = '<span style="color:#FF0000"> hi </span>';

这就是我想要做的，但innerHTML就变成了

<span style="color:#FF0000"> hi </span> 

而不是hi红色。

注意：我正在使用TextArea，我希望能够以多种文本颜色书写。

Answer 1

chatTextBox.innerHTML =“<span style='color:#FF0000'> hi </span>”;

尝试这种方式，理想情况下应该有效。

Answer 2

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

现在，如果你想要有许多不同颜色的文字，你就不能使用textarea，你必须使用某种有意义的元素。

Answer 3

样式可通过这种方式访问​​：

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

Answer 4

使用contenteditable元素可以实现这一点。总结一下，您可以使用contenteditable属性将任何元素转换为类似textarea的元素。 contenteditable属性可以允许您输入<p>标记，如下所示：

<p contenteditable="true" id="changeColor">Click to type</p>

由于contenteditable元素不是textarea，因此您可以在其中添加实际代码。使用contenteditable <p>标记，您可以在问题中插入您显示的<span>标记。要更改contenteditable元素的颜色，您必须使用javascript命令：document.execCommand()。如果您在使用execCommand()时需要帮助，我发现了一个很棒的link。如果您需要示例，document.execCommand('bold')会将所选文本转换为粗体文本。这听起来很简单，但相对比较困难。祝你的项目好运！