innerHTML 和改变颜色

Posted 2023-05-07

【中文标题】innerHTML 和改变颜色

【英文标题】：innerHTML and change color

【发布时间】：2013-07-04 17:56:03

【问题描述】：

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

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

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

而不是红色的hi。

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

【参考方案1】：

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

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

【讨论】：

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

【参考方案2】：

这可以通过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 设置其颜色。一个很好的例子和更多的解释可以在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 脚本的新手，但我尝试过帮助！