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

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

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

而不是hi红色。

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

4

5 回答 5

3

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

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

于 2015-08-26T05:41:37.460 回答
1

这可以通过一个contenteditable元素来实现。总而言之，您可以使用该contenteditable属性将任何元素转换为类似 textarea 的元素。该contenteditable属性可以允许您输入<p>标签，如下所示：

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

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

于 2016-10-31T20:24:40.640 回答
0 
chatTextBox.value = 'hi';
chatTextBox.style.color = 'red';

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

于 2013-07-07T03:43:34.927 回答
0

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

document.getElementById("chatTextBox").style.visibility = 'hidden';
document.getElementById('chatTextBox').innerHTML = "Hello";
于 2013-07-07T03:47:29.753 回答
0

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

于 2015-09-10T09:45:10.543 回答