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 / Idon'tevenknowanymore：

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;
}

将该类添加到当天：

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

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

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

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

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

与DOM接口方法（如getElementById或getElementsByTagName ，jQuery使用CSS选择器来获取对元素的引用。 如果您打算使用它，您应该查看文档 。

Answer 2

既然您已经在问题上标记了jQuery，那么您可以用以下代码替换所有代码：

var day = (new Date()).getDay();
var daysOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

$("#" + daysOfTheWeek[day] + " h3").css("color", '#DB35B0');

或者只为今天的颜色设置一个CSS规则：

.today h3 {color: #DB35B0;}

然后，使用此代码：

var day = (new Date()).getDay();
var daysOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

$("#" + daysOfTheWeek[day]).addClass("today");

Answer 3

如果你正在使用jquery，这将会做到，但我也不是专家！

<style>
.highlighted1{color:#ff0000;}
</style>
<div id="Monday" class="day1"> <h2> Mon</h2><h3>8am-9pm</h3></div>
<div id="Tuesday" class="day2"> <h2> Tue</h2><h3>8am-9pm</h3></div>
<div id="Wednesday" class="day3"> <h2> Wed</h2><h3>8am-9pm</h3></div>
<div id="Thursday" class="day4"> <h2> Thu</h2><h3>8am-9pm</h3></div>
<div id="Friday" class="day5"> <h2> Fri</h2><h3>8am-9pm</h3></div>
<div id="Saturday" class="day6"> <h2> Sat</h2><h3>8am-9pm</h3></div>
<div id="Sunday" class="day0"> <h2> Sun</h2><h3>8am-9pm</h3></div>
<script language="javascript" type="text/javascript">
var day=new Date().getDay();
$(".day"+day+" h3").addClass("highlighted1");
</script>

Answer 4

document.getElementById要求您使用id属性的值来获取元素。 你不能做document.getElementById('Friday h3') ，只能做document.getElementById('Friday') 。

这是一个有效的例子：

• http://jsfiddle.net/fVtb6/

使用jQuery，您可以这样做：

$('#Friday h3').css('color', 'red')

工作范例：

• http://jsfiddle.net/fVtb6/1/

Answer 5

你需要穿过孩子们。 使用jQuery它是一个单行：

$("#Friday h3").css("color","#DB35B0");

在纯JavaScript中，您必须向.getElementById()提供单个id，并返回对单个匹配元素的引用（如果没有匹配，则返回null ），但是一旦引用了该元素，就可以处理其子元素：

var div = document.getElementById("Friday"),
    i;

for (i = 0; i < div.children.length; i++)
   div.children[i].style.color = "#DB35B0";

// Or to just get the h3 child elements:

var h3kids = div.getElementsByTagName("h3");
for (i = 0; i < h3kids.length; i++)
   h3kids[i].style.color = "#DB35B0";

// Or, depending on which browsers you want to support (e.g., not IE7)
// you can skip the getElementById step:

var h3list = document.querySelectorAll("#Friday h3");
for (i = 0; i < h3list .length; i++)
   h3list [i].style.color = "#DB35B0";

Answer 6

就像是：

var day = (new Date()).getDay();
var ids = ['Sunday','Monday','Tuesday','Wednesday',
           'Thursday','Friday','Saturday'];
var colours = ['#DB35B0','#DB35B0', '#DB35B0',
               '#DB35B0','#DB35B0','#DB35B0','#DB35B0'];

document.getElementById(ids[day]).style.color = colours[day];

应该让你开始。 请注意，如果您将所有颜色设置为相同的值，则不需要颜色数组，但是您可能希望在不同的日期使用不同的颜色。

顺便说一句，你可以用一个类来做到这一点：

<style type="text/css">

  .today h3 {
    color: #DB35B0;
  }

</style>
<script>

function doColours() {
  var ids = ['Sunday','Monday','Tuesday','Wednesday',
             'Thursday','Friday','Saturday'];
  document.getElementById(ids[(new Date()).getDay()]).className = 'today';
}
</script>

或者（天堂禁止！）与document.write：

var day = (new Date()).getDay();
var id = ['Sunday','Monday','Tuesday','Wednesday',
          'Thursday','Friday','Saturday'][day];
var str = '<style type="text/css">'
str += '#' + id + ' h3 { color: #DB35B0; }<\/style>';
document.write(str);