javascript - jquery/javascript 根据日期更改文本颜色

Question

我正在尝试制作一个“营业时间”表格，为用户突出显示当天。

HTML:

                    <div id="Monday"> <h2> Mon</h2><h3>8am-9pm</h3></div>
                    <div id="Tuesday"> <h2> Tue</h2><h3>8am-9pm</h3></div>
                    <div id="Wednesday"> <h2> Wed</h2><h3>8am-9pm</h3></div>
                    <div id="Thursday"> <h2> Thu</h2><h3>8am-9pm</h3></div>
                    <div id="Friday"> <h2> Fri</h2><h3>8am-9pm</h3></div>
                    <div id="Saturday"> <h2> Sat</h2><h3>8am-9pm</h3></div>
                    <div id="Sunday"> <h2> Sun</h2><h3>8am-9pm</h3></div>

jQuery/Javascript/我再也不知道了:

var d=newDate();
var day=d.getDay();

if (day == 1)
    {
        document.getElementById('Monday').style.color='#DB35B0'
    }
else if (day == 2)
    {
        document.getElementById('Tuesday').style.color='#DB35B0'
    }
else if (day == 3)
    {
        document.getElementById('Wednesday').style.color='#DB35B0'
    }
else if (day == 4)
    {
        document.getElementById('Thursday').style.color='#DB35B0'
    }
else if (day == 5)
    {
        document.getElementById('Friday').style.color='#DB35B0'
    }
else if (day == 6)
    {
        document.getElementById('Saturday').style.color='#DB35B0'
    }
else if (day == 0)
    {
        document.getElementById('Sunday').style.color='#DB35B0'
    }

问题是，如果我要更改 css 中的颜色，我会使用:

      #Friday h3 {color:#DB35B0;}

这在 Javascript 中似乎不起作用:

      else if (day == 5)
    {
        document.getElementById('Friday h3').style.color='#DB35B0'
    }

我也试过:

      else if (day == 5)
    {
        document.getElementById('Friday').children.style.color='#DB35B0'
    }

但这并没有什么作用。

那我该怎么办？

是否可以定位 div 的子元素并更改它们的颜色？

Answer 1

是的，有多种方法可以检索后代元素(例如 getElementsByTagName )，但是 getElementById不接受 CSS 选择器。 [...].children.style 不起作用的原因是 .children返回 NodeList，即节点的 集合。您必须对其进行迭代或使用所需节点的索引访问它。

我建议使用一种不同的、更简单的方法:

使用类为颜色创建 CSS 规则:

.today h3 {
   color: #DB35B0;
}

将该类(class)添加到当天:

var days = ['Sunday', 'Monday', ..., 'Saturday'],
    now = new Date(),
    today = now.getDay();

document.getElementById(days[today]).className += ' today';

代码更少，您可以更轻松地更改样式。

编辑:我刚刚看到您用 jQuery 标记了问题。在这种情况下，您可以将最后一行替换为:

$('#' + today).addClass('today');

与 getElementById 或 getElementsByTagName 等 DOM 接口(interface)方法相比，jQuery 使用 CSS 选择器来获取对元素的引用。你应该看看 documentation如果您打算使用它。