如何通过JavaScript根据当前月日为匹配的HTML元素添加指定类名

云原生阿岚

2026-4-15

嘿，我来帮你排查下问题～你的整体思路完全没问题，就是几个日期处理的小细节没踩对坑，导致脚本没生效，我给你拆解下问题点和修正后的代码：

问题出在这3个小细节：

用错了日期方法：你写的getDay()是用来获取星期几的（返回0-6，0代表周日），要获取当月的具体日期，得用getDate()才行！
月份的格式不匹配：getMonth()返回的是0-11（0对应1月），所以得先加1；而且你的data-date是两位数字的月份（比如"09"代表9月），如果直接用数字拼接，9月会变成"9"，和"09"对不上，得补前导零。
日期的补零处理：同理，如果是1-9号，getDate()返回的是单个数字，也要补成两位（比如5号变成"05"），才能和data-date的格式对齐。

修正后的完整代码：

JavaScript部分：

$(function() {
  var today = new Date();
  // 处理月份：加1后转成两位，不足补0
  var month = String(today.getMonth() + 1).padStart(2, '0');
  // 处理日期：转成两位，不足补0
  var day = String(today.getDate()).padStart(2, '0');
  // 拼成和data-date一致的MM-DD格式
  var formattedToday = month + "-" + day;

  $(".grid-item").each(function() {
    var specifiedDate = $(this).data('date');
    // 现在格式完全匹配，就能正确判断了
    if (formattedToday === specifiedDate) {
      $(this).addClass('today');
    }
  });
});

CSS部分（补全你截断的代码）：

.grid-item {
  height: 130px;
  width: 130px;
  float: left;
  background: red;
  margin: 10px;
}

.today {
  background: yellow;
  border: 2px solid orange;
}