![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
タイトル通りなのですが、なかなかうまくいきません・・・。
<BODY style="background-image:url(test.gif);background-repeat:no-repeat;
background-attachment:fixed;background-position:bottom right;">
スタイルを使って右下に背景画像を表示しています。このtest.gifを時間帯によって変えたいです。
自分なりにこのようにしてheadタグの中に埋め込みましたがうまくいきません。
<SCRIPT LANGUAGE="JavaScript">
<!--- function geth(t){ if (t<=5) document.write("<BODY style='background-image:url(test1.gif);background-repeat:no-repeat;
background-attachment:fixed;background-position:bottom right;'>");
else { if (t<=11) document.write("<BODY style='background-image:url(test2.gif);background-repeat:no-repeat;
background-attachment:fixed;background-position:bottom right;'>");
else { if (t<=17) document.write("<BODY style='background-image:url(test3.gif);background-repeat:no-repeat;
background-attachment:fixed;background-position:bottom right;'>");
else { if (t<=23) document.write("<BODY style='background-image:url(test4.gif);background-repeat:no-repeat;
background-attachment:fixed;background-position:bottom right;'>");
}}} } //---> </SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--- h = new Date(); geth(h.getHours()); //---> </SCRIPT>
<BODY BACKGROUND='test.gif'>という普通の背景の表示の仕方ならうまくできました。スタイルはheadの中では使えないのでしょうか・・・?どのようにすればうまくいくでしょうか?JavaScriptに関してはほとんど無知ですがよろしくおねがいします。
※意味不明なことを言っていたらすみません。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_02.png?5a7ff87)
No.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要素を別に書き込んで、そこから読み込ませる形にしてあります。
これでうまくいくのではないでしょうか。
参考になれば。 見当違いでしたら、ごめんなさい。
回答ありがとうございます!うまくできました!完璧です!
head要素内でbodyタグを書き出すのは強引だったんですねぇ・・・。背景画像を指定するのだけにJavaScriptを使えばよかったんですね。本当に助かりました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
日付の書式の確認方法
-
なぜ、ジャバスクリプトが表示...
-
Math.sin(30) を度で
-
JavaScriptでFirefox使用者の閲...
-
記述の仕方を教えて下さい。
-
document.writeについて
-
「今日の日付けを画像で表示」...
-
HpのFlashで,ブロック回避の方...
-
画像をクリックすると閉じる別...
-
時間帯によって背景画像を変える
-
javascriptをはじめて勉強して...
-
google apps scriptの終了のさせ方
-
翌月を取得するGASが分かりません
-
GASでundefinedエラーが出ます
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
-
Linux バイナリ実行できない "...
-
ジェネレーターの作り方
-
ActiveXobjectが作成できない
-
jspからjavascriptの変数引継ぎ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openでタイトル名の指定
-
ホームページに日付を自動更新...
-
なぜ、ジャバスクリプトが表示...
-
○歳△ヶ月と×日を計算してくれる...
-
今日の月と日付の1週間後や3日...
-
javascriptとphpの連携で疑問
-
引数を渡さずに呼び出し元の変...
-
document.clear()の使い方について
-
document.writeで画面が消える
-
文字列を点滅させたい
-
java カレンダーの日付指定で...
-
Java Scriptのメソッドについて
-
面白い!便利!と思った【JavaS...
-
javaで画像をランダム表示しつ...
-
ウェブ上にキーボードを作りた...
-
JavaScriptで前月を算出する方法
-
document.writeについて
-
for文のiを使ってリンク先のア...
-
外部JavaScriptでのd...
-
前のページに戻るとページトッ...
おすすめ情報