Question

输出不会更改当前日期的颜色。当我在case语句中添加示例警报语句时，警报会起作用。当我删除它并添加style.color =“red”时，当前日期不会变为红色。这是为什么？

<head>

<script>

switch (new Date().getDay()) {
    case 0: 
        document.getElementById("sun").style.color = "red";
        break;
    case 1:
        document.getElementById("mon").style.color = "red";
        break;
    case 2:
        document.getElementById("tues").style.color = "red";
        break;
    case 3:
        document.getElementById("wed").style.color = "red";
        break;
    case 4:
        document.getElementById("thur").style.color = "red";
        break;
    case 5:
        document.getElementById("fri").style.color = "red";
        break;
    case  6:
        document.getElementById("sat").style.color = "red";
        break;
}

</script>   

</head>

<body>
    <table>
        <tr>
            <td><p id="sun">Sun</p></td>
            <td><p id="mon">Mon</p></td>
            <td><p id="tue">Tue</p></td>
            <td><p id="wed">Wed</p></td>
            <td><p id="thur">Thur</p></td>
            <td><p id="fri">Fri</p></td>
            <td><p id="sat">Sat</p></td>                        
        </tr>
    </table>                    
</body>
</html>

Answer 1

将脚本标记移动到主体部分下方，当元素尚未在DOM中呈现时，它会首先执行，因此您无法获得颜色。

Answer 2

2 isssues：

1你使用＆＃39; tues＆＃39;在您的交换机中，但ID是“tue＆＃39;”。第二个当前你在body元素存在之前调用js。尝试类似：

<html>
<head>

<script type='text/javascript'>

function highlightDate()
{
switch (new Date().getDay()) {
    case 0: 
        document.getElementById("sun").style.color = "red";
        break;
    case 1:
        document.getElementById("mon").style.color = "red";
        break;
    case 2:
        document.getElementById("tue").style.color = "red";
        break;
    case 3:
        document.getElementById("wed").style.color = "red";
        break;
    case 4:
        document.getElementById("thur").style.color = "red";
        break;
    case 5:
        document.getElementById("fri").style.color = "red";
        break;
    case  6:
        document.getElementById("sat").style.color = "red";
        break;
    }
}

</script>   

</head>

<body>
<table>
    <tr>
        <td><p id="sun">Sun</p></td>
        <td><p id="mon">Mon</p></td>
        <td><p id="tue">Tue</p></td>
        <td><p id="wed">Wed</p></td>
        <td><p id="thur">Thur</p></td>
        <td><p id="fri">Fri</p></td>
        <td><p id="sat">Sat</p></td>                        
    </tr>
</table>

<script type='text/javascript'>highlightDate();</script>
</body>
</html>

请注意，JS非常重复，绝对可以清理。

Answer 3

问题是您没有等待加载窗口并且脚本先运行。您需要定义一个window.onload函数来处理这个问题。

我拿了你的代码并将其修复为plnkr：

添加到您的头部：

window.onload = function () { 
     ...
}

Your code working now

Answer 4

如前所述，在表之后移动脚本标记，或者如果它不是一个选项，则将代码创建为函数，然后在页面加载时执行它（您可以在脚本标记的末尾添加它）：< / p>

window.onload = functionName;

另外，我可以提供更短版本的代码：

document.getElementsByTagName('p')[new Date().getDay()].style.backgroundColor = 'red';

（编辑：没有注意到你使用'星期日第一格式'，但你抓住了我的漂移:-)）

如何使用getDate方法更改当前日期的文本颜色？

4 个答案: