如何在日期过后为指定div添加类（JavaScript实现）

你的思路完全可行 #

通过解析div的id获取日期数字，再和当前日期对比，给已过日期的div添加样式类的逻辑是完全通顺的，具体实现代码可以参考：

// 获取当前日期的天数
const currentDay = new Date().getDate();

// 遍历1到31天对应的div
for (let i = 1; i <= 31; i++) {
  const dayDiv = document.getElementById(`day-${i}`);
  // 确保div存在且日期早于当前日期时添加类
  if (dayDiv && i < currentDay) {
    dayDiv.classList.add('pastdate');
  }
}

更简便的优化方法 #

如果想让代码更简洁易维护，可以试试以下两种调整：

方法1：用data属性替代id解析 #

给每个div添加data-day属性直接存储日期数字，省去解析id的步骤：

<div data-day="1" class="something">content</div>
<div data-day="2" class="something">content</div>
<!-- 其余日期div同理 -->

对应的JS代码：

const currentDay = new Date().getDate();
// 批量选择所有带data-day属性的div并处理
document.querySelectorAll('[data-day]').forEach(div => {
  const day = parseInt(div.dataset.day, 10);
  if (day < currentDay) {
    div.classList.add('pastdate');
  }
});

方法2：直接批量选择id前缀匹配的元素 #

不用循环数字，直接选择所有id以day-开头的元素，再解析日期：

const currentDay = new Date().getDate();
document.querySelectorAll('[id^="day-"]').forEach(div => {
  // 从id中提取日期数字
  const day = parseInt(div.id.split('-')[1], 10);
  if (day < currentDay) {
    div.classList.add('pastdate');
  }
});

额外提示 #

如果需要适配不同月份的实际天数（比如2月最多29天），可以先获取当前月份的总天数，避免处理不存在的日期div：

const today = new Date();
const currentDay = today.getDate();
// 获取当前月份的最后一天，得到当月总天数
const totalDays = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();

// 只遍历到当月实际天数
for (let i = 1; i <= totalDays; i++) {
  const dayDiv = document.getElementById(`day-${i}`);
  if (dayDiv && i < currentDay) {
    dayDiv.classList.add('pastdate');
  }
}

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