Html innerHTML 并更改颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17509050/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
innerHTML and change color
提问by PerfectAffix
chatTextBox.innerHTML = '<span style="color:#FF0000"> hi </span>';
This is what I want to do, but the innerHTML just becomes
这就是我想要做的，但是innerHTML 就变成了
<span style="color:#FF0000"> hi </span>
and not hiin red.
而不是hi红色。
Note: I'm using a TextArea and I want to be able to write in multiple text color.
注意：我正在使用 TextArea 并且我希望能够以多种文本颜色书写。
回答by Krupa Gowda
chatTextBox.innerHTML = "<span style='color:#FF0000'> hi </span>";
chatTextBox.innerHTML = " <span style='color:#FF0000'> hi </span>";
try this way, it should ideally work.
试试这种方式，它应该理想地工作。
回答by Cannicide
This is possible with a contenteditableelement. To sum it up, you can use the contenteditableattribute to turn any element into a textarea-like element. The contenteditableattribute can allow you to type in a <p>tag, like so:
这可以通过contenteditable元素实现。综上所述，您可以使用该contenteditable属性将任何元素变成类似 textarea 的元素。该contenteditable属性允许您输入<p>标签，如下所示：
<p contenteditable="true" id="changeColor">
Click <span style="color:red">to</span> type
</p>
Because the contenteditableelement is not a textarea, you can add actual code inside it. With the contenteditable<p>tag, you can insert the <span>tag you showed us in your question and set its color using CSS. A good example and more explanation can be found at my answer to a similar question.
因为contenteditable元素不是textarea，所以您可以在其中添加实际代码。使用contenteditable<p>标签，您可以插入<span>您在问题中向我们展示的标签，并使用 CSS 设置其颜色。一个很好的例子和更多的解释可以在我对类似问题的回答中找到。
回答by Tushar Shukla
I'm not sure if this is what you want but have a look at this Codepen!It changes color of input box randomly. Here's the HTML Below:
我不确定这是否是你想要的，但看看这个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>
Here's is JS:
这是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;
}
P.S. I'm new to java script but i tried helping!
附注。我是 Java 脚本的新手，但我尝试提供帮助！
回答by Musa
chatTextBox.value = 'hi';
chatTextBox.style.color = 'red';
Now if you want to have many different colour text you cant use a textarea you'll have to use some kind of contenteditable element.
现在，如果您想拥有许多不同颜色的文本，则不能使用 textarea，则必须使用某种 contenteditable 元素。
回答by stackexchanger
Style accessible this way:
样式可以通过这种方式访问：
document.getElementById("chatTextBox").style.visibility = 'hidden';
document.getElementById('chatTextBox').innerHTML = "Hello";
