JavaScriptで月ごとに背景画像を切り替えたいです。

Question

ウェブサイトを作っているのですが

JavaScriptで月ごとに背景画像を切り替えたいです。

例えば、クラスで指定した背景画像background-imageを
1ヶ月ごと、月の頭に自動で切り替えたいのですが
全くの初心者でうまく行かなく困っております

基本的なことかと思いますがどなたか教えていただけないでしょうか？
どうぞよろしくお願いします。

追記

回答ありがとうございます、不慣れななかお手数おかけしました。
現状は

<script>
<!--
function pic_change(){
d=new Date();
month=d.getMonth()+1;
document.write('<.monthp background="img/back/' + month + '.jpg">');
}
pic_change();
//-->
</script>

<section class="monthp">
///略///
</section>

でして、monthpの背景画像を変更したいのですが
1〜12.jpgの画像は用意してます。
document.write('<.monthp background="img/back/' + month + '.jpg">');
のmonthpじゃなくてbodyなら読み込んで来てくれるんですが、色々調べたのですが、
書き方が全くわかっていませんで...

どうぞよろしくお願いします。

Comments

[miyabi_pudding]

ご自身で、どこまで調べ（参考にしたページがあるならそのページのURL）、やってみたか（自身で書いてみたソースコード）を、質問本文に載せてください。（このコメント欄ではなく、質問本文を編集して載せる）
今のままではやりたいことをやってくれという丸投げの質問です。
自身でまずはやってみましょう。

[miyabi_pudding]

私のコメントよく見てください。
"質問本文に記載"してください。
質問編集の<code>ボタンを押すと挿入される、
```
この間にソースコードを入れる
```
ってやります。

Answer 1

例

document.documentElement.setAttribute('data-month', (new Date().getMonth() + 1).toString());

[data-month="1"] body {
  background-image: url('january.png');
}

/* 以降同様 */

Comments

[marcom]

回答ありがとうございます、初質問で、不備の多いなかありがとうございます。

Answer 2

単純に、ファイル名を固定して、毎月、格納しているファイルを変更するとか。

例えば、"project1"フォルダ( ディレクトリ ) にhtmlや画像ファイル等があるとして、
毎月 background.jpg というファイル名で変更する。(手作業)

もしくは、

htmlかJSファイル等に
1月: 1月.jpg
2月: 2月.jpg
...
と指定するようにする。

質問者さんがコードを出していないので、ここまでしか説明できません。

---

[追記1]

(追記読んで)了解しました。

それではDOM操作っていうのをやってみてください。

私なら bodyタグを動的に書き換えて行いますね。

配列を用意して、これに表示する画像のファイル名を記述しておく。

Comments

[marcom]

回答ありがとうございます、初質問で、不備の多いなかありがとうございます。

[marcom]

DOM操作という単語で調べて、何をしていくのか方向が見えてきた感じです、まだまだ解決はしてませんが...ありがとうございました！

Answer 3

月が変わるごとに

• cssを切り替える
• 画像ファイルを切り替える

でも対応できそうですが
new Date().getMonth();
で月が得られるので、配列と組あせて処理してもよいでしょう。
（ただし1月が0、2月が1・・・・12月が11）

Comments

[marcom]

回答ありがとうございます、初質問で、不備の多いなかありがとうございます。