- ベストアンサー
時間帯によって背景画像を変える方法
- 背景画像を時間帯に応じて変える方法について教えてください。普通の背景表示ではうまくいかず、JavaScriptを使ってスタイルを変える方法を試していますがうまくいきません。
- headタグ内でスタイルを変える方法について教えてください。JavaScriptを使って時間帯によってスタイルを切り替えることができないのですが、どのようにすればうまくいくでしょうか？
- 普通の背景表示ではうまくいかず、スタイルの変更を試していますがうまくいきません。JavaScriptを使用して時間帯によって背景画像を変える方法を教えてください。
- piko7531
- お礼率89% (69/77)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
head要素内でbodyタグを書き出すようになっている点が気になります。 本来であれば、bodyタグは1つだけですので、ソースのHTML文法の面での整合性を重視するなら、ちょっと強引過ぎるかもしれません。 document.write()でbodyタグを書き出す方法を取るのであれば、それよりもhead要素内にJavaScriptでstyleタグを書き出して、そのスタイルシートで背景画像を指定するのがよいのではないでしょうか。 あるいは、DHTML的手法を使って、JavaScriptからbody要素の背景画像のスタイルシートにアクセスし、書き換えるという方法でも良いかも知れませんね。 とりあえず、document.write()でスタイルシートを書き出す手法を。 <SCRIPT LANGUAGE="JavaScript"><!-- h = new Date(); t=h.getHours(); if (t<=5) { bgimg="test1.gif"} else if (t<=11) { bgimg="test2.gif"} else if (t<=17) { bgimg="test3.gif"} else { bgimg="test4.gif"} stl="<style type=\"text/css\"><!--\n body{background-image: url(\""+bgimg+"\");\n}/n-"+"-><"+"/style>\n"; document.write(stl); //---> </SCRIPT> <style type="text/css"><!-- body{ background-repeat:no-repeat; background-attachment:fixed; background-position:bottom right; } --></style> これをhead内に入れてみてください。 背景画像を指定するスタイルシートはJavaScriptから書き出すようにして、それ以外のスタイル(背景画像の表示位置、リピートなど)については共通しているようですので、JavaScriptからではなく、style要素を別に書き込んで、そこから読み込ませる形にしてあります。 これでうまくいくのではないでしょうか。 参考になれば。 見当違いでしたら、ごめんなさい。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
回答ありがとうございます！うまくできました！完璧です！ head要素内でbodyタグを書き出すのは強引だったんですねぇ・・・。背景画像を指定するのだけにJavaScriptを使えばよかったんですね。本当に助かりました。