HTML/CSS/JS日历自动高亮当前日期失效问题求助

问题描述 #

我正在使用HTML、CSS和JavaScript制作日历，希望实现自动高亮当前日期的功能，但当前日期并未被高亮，通过Chrome开发者工具发现.today类的红色背景样式未应用到当日日期。

我的代码如下：

HTML代码 #

<ul class="days">
    <li id="01">1</li>
    <li id="02">2</li>
    <li id="03">3</li>
    <li id="04">4</li>
    <li id="05">5</li>
    <li id="06">6</li>
    <li id="07">7</li>
    <li id="08">8</li>
    <li id="09">9</li>
    <li id="10">10</li>
    <li id="11">11</li>
    <li id="12">12</li>
    <li id="13">13</li>
    <li id="14">14</li>
    <li id="15">15</li>
    <li id="16">16</li>
    <li id="17">17</li>
    <li id="18">18</li>
    <li id="19">19</li>
    <li id="20">20</li>
    <li id="21">21</li>
    <li id="22">22</li>
    <li id="23">23</li>
    <li id="24">24</li>
    <li id="25">25</li>
    <li id="26">26</li>
    <li id="27">27</li>
    <li id="28">28</li>
    <li id="29">29</li>
    <li id="30">30</li>
    <li id="31">31</li>
</ul>

CSS代码 #

.today { 
    background: red; 
}

JavaScript代码 #

hday();

function hday() {
    var d = new Date().getDate();
    document.getElementById(d).classList.add('today'); 
}

解决方案 #

问题核心是日期格式不匹配：

• new Date().getDate()返回的是数字类型的日期（比如1、2...9、10），而HTML中<li>的id是带前导零的字符串（比如"01"、"02"...）。用数字d查找id时，找不到对应元素，自然无法添加.today类。

修正后的JavaScript代码 #

把数字日期格式化为带前导零的字符串，同时确保DOM加载完成后再执行函数：

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

function hday() {
    var d = new Date().getDate();
    // 格式化日期：小于10的数字补前导零
    var formattedDate = d < 10 ? '0' + d : d.toString();
    var targetElement = document.getElementById(formattedDate);
    // 检查元素是否存在，避免当月无31号时报错
    if (targetElement) {
        targetElement.classList.add('today');
    }
}

关键优化说明 #

1. DOM加载时机：原代码直接调用hday()，如果JS放在HTML之前加载，此时<li>元素还未被浏览器解析，getElementById会返回null。用DOMContentLoaded事件确保DOM完全加载后再执行函数。
2. 边界检查：添加元素存在判断，避免当月天数不足31天时（如2月、4月），代码查找不存在的id元素导致报错。

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