javascript - 使用 javascript 的时间敏感的 css 样式表切换

Question

我正在尝试根据时间切换我的 css 样式表。一个在白天，一个在晚上。我是 Java 的新手，但我一直在阅读大量关于 javascript 的文章，并生成了一些应该让这项工作起作用的代码。我试过了，当然不行。

我试着把代码放在标题中，然后我试着把它直接放在标签后面。但这也不起作用。

css 样式表本身可以工作，但在脚本中使用时根本不起作用。这使我相信这是不正确的脚本。可能是我写错了？

这是javascript代码:

<script language="JavaScript">
  var d=new Date();
  var twi_am_start = 4;
  var twi_am_end = 5;
  var twi_pm_start = 17;
  var twi_pm_end = 18;
  if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end)
    document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">');

  else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start )

    document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/daytime.css" type="text/css">');

  else
    document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">');

</script>

Answer 1

与其更改 css 文件，我建议您将 body 元素上的类从“day”更改为“night”。然后在 css 文件中使用类选择器。

css file
.day h2 {font-weight: bold;}
.night h2  {font-weight: normal;}
... etc

更新:然后使用 Javascript document.body.className='day'; 进行更改。感谢@Phrogz 的 JS。 (请参阅对此答案的评论。)