時刻により<header>の背景画像を変更したい。

前提・実現したいこと

こんにちは。
時刻により<header>内の背景画像を変更したいです。
ネットで<body>内の背景画像変更コード（下記）は見つけたのですが、どうしたら<header>内に適用できるでしょうか。
教えてください。
どうかよろしくお願いします

発生している問題・エラーメッセージ

反映されない。

該当のソースコード

html
1<html lang="ja">
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
4<meta http-equiv="Content-Script-Type" content="text/javascript">
5<title>サンプル</title>
6<script type="text/javascript">
7<!--
8var wall = new Array(24);
9wall[0] = "./image00.gif";
10wall[1] = "./image01.gif";
11wall[2] = "./image02.gif";
12wall[3] = "./image03.gif";
13wall[4] = "./image04.gif";
14wall[5] = "./image05.gif";
15wall[6] = "./image06.gif";
16wall[7] = "./image07.gif";
17wall[8] = "./image08.gif";
18wall[9] = "./image09.gif";
19wall[10] = "./image10.gif";
20wall[11] = "./image11.gif";
21wall[12] = "./image12.gif";
22wall[13] = "./image13.gif";
23wall[14] = "./image14.gif";
24wall[15] = "./image15.gif";
25wall[16] = "./image16.gif";
26wall[17] = "./image17.gif";
27wall[18] = "./image18.gif";
28wall[19] = "./image19.gif";
29wall[20] = "./image20.gif";
30wall[21] = "./image21.gif";
31wall[22] = "./image22.gif";
32wall[23] = "./image23.gif";
33
34function bgchange() {
35var time = new Date().getHours();
36document.header.background = wall[time];
37}
38// -->
39</script>
40</head>
41<body background="./image00.gif" onload="bgchange();">
42:
43:
44</body>
45</html>

試したこと

document.body.background = wall[time];からdocument.header.background = wall[time];に変えた。

追伸

<body>内の：（てんてん）のところには <dody>内容を書き込めばいいんでしょうか。それとも <body background="./image00.gif" onload="bgchange();"> <body background="./image01.gif" onload="bgchange();"> <body background="./image02.gif" onload="bgchange();"> <body background="./image03.gif" onload="bgchange();"> 　　　　　　　　　　　　　　　：　　　　　　　　　　　　　　　： <body background="./image24.gif" onload="bgchange();"> とするのでしょうか。どうか、回答よろしくお願いいたします。 ### 補足以下のサイトを参考にいたしました。 [参考にしたサイト](http://www9.plala.or.jp/oyoyon/html/script/wall02.html)

m.ts10806

2021/01/18 00:34

htmlを見るとheaderタグがなくbodyに直接指定されているようですが、結局どうしたいのでしょうか。

行動規範の内容に同意します

回答2件

ベストアンサー

documentにbodyやheadという<body>や<head>にアクセスするためのプロパティはあるのですが、<header>に直接アクセスするためのものはありません(Documentの定義)。 querySelector()やgetElementById()を使うとよいでしょう。
backgroundプロパティは<body>にしかないので、けっきょくCSSの文法に変える必要があり、それだったらclassの切り替えで対処すべきかと思います。

html
1<style>
2.hour0 {
3  background: url(./image00.gif);
4}
5/* .hour1 から .hour22 も同様に定義 */
6.hour23 {
7  background: url(./image23.gif);
8}
9</style>
10<script>
11window.onload = () => {
12  document.querySelector('header').classList.add(
13      `hour${new Date().getHours()}`);
14};
15</script>
16<body>
17  ...
18  <header>...</header>
19  ...
20</body>