innerHTML 和改变颜色答案

【问题标题】：innerHTML and change colorinnerHTML 和改变颜色
【发布时间】：2013-07-04 17:56:03
【问题描述】：

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

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

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

而不是红色的hi。

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

【问题讨论】：

标签： html innerhtml

【解决方案1】：

chatTextBox.innerHTML = " hi ";

试试这个方法，理想情况下应该可以工作。

【讨论】：

我根本看不出它在文本区域中的理想工作方式。事实上，这与问题中的代码行完全相同。这是 OP 告诉我们的代码行不起作用。如果您尝试将 HTML 元素添加到 textarea 元素中，它们将不会显示为 HTML 元素，而是显示为纯文本。

【解决方案2】：

这可以通过contenteditable 元素实现。综上所述，您可以使用contenteditable 属性将任何元素转换为类似textarea 的元素。 contenteditable 属性可以让您输入 标签，如下所示：

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

因为contenteditable 元素不是textarea，您可以在其中添加实际代码。使用 contenteditable  标签，您可以插入您在问题中向我们展示的  标签，并使用 CSS 设置其颜色。一个很好的例子和更多的解释可以在my answer to a similar question找到。

【讨论】：

【解决方案3】：

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

现在，如果您想拥有许多不同颜色的文本，则不能使用 textarea，您必须使用某种 contenteditable 元素。

【讨论】：

我的目标是在同一个 TextArea 上有效地使用不同颜色的文本......那么我现在该怎么办？ contenteditable 元素？
@PerfectAffix 我就是这么说的。
是的，但什么是 contenteditable 元素？我是否只需要设置 contenteditable='true' 并且我尝试对 TextArea 执行的操作会起作用吗？
@PerfectAffix contenteditable 不会在使用段落或分区的文本区域上工作。还要研究 contenteditable。

【解决方案4】：

通过这种方式访问样式：

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

【讨论】：

【解决方案5】：

我不确定这是否是你想要的，但看看这个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 脚本的新手，但我尝试过帮助！

【讨论】：