如何在使用document.getElementById("id"). innerhtml时改变文本

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

本文关键字：quot id innerhtml 文本 改变 document getElementById      更新时间：2023-09-26

我试图在特定事件发生时将span的文本更改为其他内容。我这样做:

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

我想用不同的颜色显示相同的内容。知道怎么做吗?感谢!

您总是可以将消息放在span中并为其添加style属性。应该这样做:

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

你可以在Mozilla开发者网络中发现，你可以使用HTMLElement.style属性来改变元素的任何样式。

你可以这样把它涂成红色:

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

一个更经得起未来考验和可重用的解决方案可能是根据您的需求向当前元素或span元素添加一个类:

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

或解决Erics解决方案:

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

然后在你的CSS中:

.color-red{
    color: #F00;
}

显然，你也可以像这样以更易于维护的方式添加不同的颜色和属性。

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

相关文章：