使用 document.getElementById("id").innerHTML 时如何更改文本颜色

Posted 2023-05-07

【中文标题】使用 document.getElementById("id").innerHTML 时如何更改文本颜色

【英文标题】：How to change colour of text when using document.getElementById("id").innerHTML

【发布时间】：2015-10-21 13:15:02

【问题描述】：

当特定事件发生时，我正在尝试将跨度的文本更改为其他内容。我这样做是：

document.getElementById("usernameError").innerhtml = "**Message";

我想用不同的颜色显示相同的内容。关于如何做到这一点的任何想法？ 非常感谢！

【问题讨论】：

同一行的颜色一定要改吗？您可以在下一行简单地使用document.getElementById("usernameError").style.color 函数。

【参考方案1】：

您总是可以将消息放在一个跨度中并在其上放置一个样式属性。应该这样做：

document.getElementById("usernameError").innerHTML = "<span style='color: red;'>**Message</span>";

【参考方案2】：

您可以在Mozilla Developer Network 中找到，您可以使用HTMLElement.style 属性来更改元素上的任何样式。

所以你可以做这样的事情来把它涂成红色：

 document.getElementById("usernameError").style.color = '#d00'

【参考方案3】：

根据您的要求，一个更具前瞻性和可重用性的解决方案可能是向当前元素或 span 元素添加一个类：

document.getElementById("usernameError").className = "color-red";

或使用 Erics 解决方案：

document.getElementById("usernameError").innerHTML = "<span class='color-red'>**Message</span>";

然后在你的 CSS 中：

.color-red
    color: #F00;

您显然也可以像这样以更易于维护的方式添加差异颜色和属性。

注意：className 返回一个字符串，表示元素的类或以空格分隔的类列表。