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

Question

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

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

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

Answer 1

您总是可以将消息放在一个范围内，然后在其上添加样式属性。应该这样做：

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

Answer 2

如您在 Mozilla Developer Network 中所见，您可以使用 HTMLElement.style 属性更改元素的任何样式。

所以你可以像这样把它涂成红色：

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

Answer 3

更适合未来和可重用的解决方案可能是根据您的要求向当前元素或跨度元素添加 class：

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

或使用 Erics 解决方案：

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

然后在你的 CSS:

.color-red{
    color: #F00;
}

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

注意：className Returns 一个字符串，表示元素的 class 或 space 分隔的 class 列表。

How to change colour of text when using document.getElementById("id").innerHTML