如何按日期条件用JavaScript修改CSS样式？及Div显示切换代码排障

嘿，我来帮你一步步解决这两个问题！

实现这个需求其实很简单，核心是日期对比 + 样式操作，具体可以分成这几步：

• 1. 获取并处理日期
  用new Date()可以获取当前系统日期，创建目标日期时推荐用更兼容的写法：

  • 直接传入年、月、日参数：new Date(2024, 5, 1)（注意：月份是从0开始的，5代表6月）
  • 或者用ISO格式字符串：new Date('2024-06-01')（这种格式几乎所有浏览器都支持）

• 2. 对比日期
  Date对象可以直接用>、<、===等比较运算符，因为它们会自动转换为时间戳（从1970年1月1日至今的毫秒数）进行对比。

• 3. 修改CSS样式
  有两种常用方式，推荐第二种（更便于样式维护）：

  1. 直接修改元素的style属性：

     document.getElementById('target').style.display = 'none';
     document.getElementById('target').style.color = '#ff0000';
     

  2. 通过添加/移除CSS类（更优雅）：
     先在CSS里定义类：

     .hidden { display: none; }
     .highlight { color: #ff0000; font-weight: bold; }
     

     然后用JS操作类：

     const element = document.getElementById('target');
     element.classList.add('highlight'); // 添加类
     element.classList.remove('hidden'); // 移除类
     

先看一下你的代码：

function testDatum(){
 var vandaag = new Date();
 var eindDatum = new Date('04/15/2018');
 if (vandaag > eindDatum){
 document.getElementById('Div1').style.display = 'none';
 } else {
 document.getElementById('Div2').style.display = 'none';
 }
}

大概率是以下几个问题导致的：

• 1. 函数没有被调用
  你只是定义了testDatum函数，但没有触发它执行！比如需要在页面加载时调用，或者绑定到某个事件上。可以试试：

  • 在脚本末尾加testDatum();
  • 或者用DOM加载完成事件确保元素已存在：

    document.addEventListener('DOMContentLoaded', function() {
      testDatum();
    });
    

• 2. 元素ID拼写错误
  检查页面中是否真的存在id="Div1"和id="Div2"的元素，ID是区分大小写的，比如div1和Div1是不同的。

• 3. 日期格式的兼容性问题
  '04/15/2018'这种MM/DD/YYYY格式虽然大部分浏览器支持，但有些环境下可能解析出错。换成更稳妥的写法：

  var eindDatum = new Date(2018, 3, 15); // 2018年4月15日，月份从0开始
  

• 4. 脚本执行时机过早
  如果你的脚本放在<head>里，DOM还没加载完成，document.getElementById会返回null，自然无法修改样式。解决方法：

  • 把脚本放在</body>标签的最后
  • 用上面提到的DOMContentLoaded事件监听

这里给你一个可以直接运行的例子，解决了上面的所有潜在问题：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container { padding: 15px; margin: 10px; border: 1px solid #ddd; }
  </style>
</head>
<body>
  <div id="Div1" class="container">这是需要隐藏的Div1</div>
  <div id="Div2" class="container">这是需要隐藏的Div2</div>

  <script>
    function testDatum(){
      var vandaag = new Date();
      // 用更兼容的方式创建目标日期
      var eindDatum = new Date(2018, 3, 15);
      // 先获取元素并检查是否存在
      const div1 = document.getElementById('Div1');
      const div2 = document.getElementById('Div2');

      if (!div1 || !div2) {
        console.error('页面中找不到Div1或Div2元素');
        return;
      }

      if (vandaag > eindDatum){
        div1.style.display = 'none';
      } else {
        div2.style.display = 'none';
      }
    }

    // 确保DOM加载完成后再执行函数
    document.addEventListener('DOMContentLoaded', testDatum);
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Sam