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

The CSS rule doesn't applies any effect when JavaScript is executed

本文关键字：应用 任何效 规则 执行 JavaScript CSS      更新时间：2023-09-26

我是网络新手，现在我正在学习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();

您的样式位于<span>元素上。使用 change 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();
}

这是因为您正在将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>
不幸的是，

您只用日期替换了 cstyle 的跨度。请记住，您已经选择了带有 id 的 p 演示来插入您的结果，因此您只需使用 innerHTML 替换其 html。如果该段落也有类 cstyle，那么一切都会好起来的。

相关文章：