時間帯別にCSSファイルを切り替える

説明

読み込むスタイルシートファイルを時間帯別に切り替えるには<link>タグにID名を指定しておきます。次に読み込むスタイルシートファイル名に工夫をしておきます。サンプルではtimeと時間を示す値の組み合わせにしてあります。例えば6時であればtime6.cssというファイル名になります。22時であればtime22.cssとなります（24時間分用意しておきます）。このファイル名(URL)を<link>タグのhref属性に設定することで時間帯別に異なるスタイルシートを適用することができます。

JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<link rel="stylesheet" type="text/css" href="time0.css" media="all" id="timeCSS">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>時間帯別にCSSファイルを切り替える</h1>
<div id="box">時間帯別にスタイルシートが切り替わります。</div>
</body>
</html>
window.onload = function(){
var cssFile = document.getElementById("timeCSS");
var dateObj = new Date();
var h = dateObj.getHours();
cssFile.href = "css/time"+h+".css";
}