使用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中所见，您可以使用ObjectMapperContextResolver属性更改元素上的任何样式。

所以你可以做这样的事情用红色着色：

HTMLElement.style

Answer 3

更具未来性和可重用性的解决方案可能是根据您的要求将类添加到当前元素或span元素：

$(".advancedSearch select option").each(function () {
                   $(this).removeAttr('selected');
               });

或者使用Erics解决方案：

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

然后在你的CSS中：

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

显然，您还可以以更加可维护的方式添加差异颜色和属性。

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