ClassList.add/remove无法生效，营业状态显示切换失败求助

云原生阿岚

2026-5-28

问题分析与修复方案

我帮你找到了两个关键问题，咱们一步步来解决：

1. 脚本执行时机错误（核心问题）

你的JS代码写在了HTML元素的前面，当浏览器执行这段脚本时，页面上的#open和#closed元素还没被解析渲染出来，所以document.getElementById()会返回null，自然没法调用classList.add/remove方法。

解决办法：

把脚本放到HTML元素的后面，或者用DOM加载完成的事件监听包裹代码，确保DOM元素都加载好再执行JS逻辑。

2. CSS样式冲突

你的.closed-sign样式里写了两次display属性：

.closed-sign { display: inline; display: none; }

浏览器会优先取后面的display: none;，前面的display: inline;完全无效，可以直接简化成：

.closed-sign { display: none; }

修复后的完整代码

<style>
 .closed-sign { display: none; }
</style>

<div style="float: right;" id="open" class="closed-sign">
 <p><span style="color: black">open: </span><span style="color: green;">9:00am - 5pm</span></p>
</div>
<div style="float: right;" id="closed" class="">
 <p><span style="color: black">closed </span></p>
</div>

<script>
 // 换成真实的当前小时，替代硬编码的测试值
 var myDate = new Date();
 var time = myDate.getHours();
 
 if ((time < 9) || (time >= 17)) {
   var openHours = document.getElementById("open");
   openHours.classList.add("closed-sign");
   var closedHours = document.getElementById('closed');
   closedHours.classList.remove("closed-sign");
 } else {
   var openHours = document.getElementById("open");
   openHours.classList.remove("closed-sign");
   var closedHours = document.getElementById("closed");
   closedHours.classList.add("closed-sign");
 }
</script>