执行JavaScript时，CSS规则不会应用任何效果

Question

我是网络新手，现在我正在学习JS。 我有这个简单的脚本要执行：

<script language="javascript">
var getDate = function() {
    var doc = document.getElementById("demo");
    doc.innerHTML = Date();
}
</script>

这个CSS规则用于显示脚本的标签：

<style type="text/css">
.cstyle {
    font-family: "Comic Sans MS", cursive;
}
</style>

在我的文档中，我有一个触发我的脚本的按钮

<p id="demo"><span class="cstyle">Result.</span></p>
<button type="button" onClick="getDate()">Display Data</button>

加载文档时“结果”显示为“Comic Sans”字体。但是，当鼠标单击发生时，日期将以默认字体显示。此行为异常，因为脚本执行结果也需要以“Comic Sans”字体显示。我该如何解决这个问题？

---

[更新。]抱歉有点错误，这是doc.innerHTML = Date();而不是doc.innerHTML = arr.toString();

Answer 1

您的样式位于<span>元素上。当您使用更改innerHTML时，<span>元素将替换为文本。您需要将代码更新为以下内容：

HTML：

<p id="demo"><span id="result" class="cstyle">Result.</span></p>

和JS：

var getDate = function() {
    var doc = document.getElementById("result");
    doc.innerHTML = Date();
}

Answer 2

这是因为您正在使用类font-family: "Comic Sans MS", cursive对元素应用.cstyle。单击按钮时，您将替换

<span class="cstyle">Result.</span>

带有字符串值的

（不带。cstyle类，它提供所需字体的样式。）

只需在父元素.cstyle上移动您的课程<p>。

<p id="demo" class="cstyle"><span >Result.</span></p>
<button type="button" onClick="getDate()">Display Data</button>

您甚至可以保留<span>元素，在这种情况下不需要。

<p id="demo" class="cstyle">Result.</p>
<button type="button" onClick="getDate()">Display Data</button>

Answer 3

不幸的是，您只使用日期替换cstyle的范围。请记住，您已选择带有id demo的p来插入结果，因此您只需使用innerHTML替换其html即可。如果该段也有cstyle类，那么一切都会好的。