- ベストアンサー
CSSレイアウトとJavascriptの連動について質問なのですが…
過去の教えてgooの記事より見つけたJavascriptのテーブルの背景画像がランダムに変わるスクリプトを使用しています。 <script type="text/javascript"> wall = new Array(); /* 使用する背景画像を好きなだけ記述 */ wall[0] = "aaaaaaaaaaaaaaa.jpg"; wall[1] = "bbbbbbbbbbbbbbb.jpg"; wall[2] = "ccccccccccccccc.jpg"; rnd = Math.round(Math.random() * (wall.length - 1)); document.write('<style type="text/css">ontline { background-image:url(' , wall[rnd] , '); }</style>'); </script> CSSレイアウトに変更したところ背景が表示されません。 CSSのOutline部分(<div id="outline"></div>)に表示させようとしたのですが、エラーが起こりレイアウトが崩れてしまいます。 JavaとCSSはどうしたら連動させる事ができますでしょうか? ぜひ教えてください。
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
>過去の教えてgooの記事より見つけたJavascriptのテーブルの背景画像がランダムに変わるスクリプトを使用しています。 変更前のJavascriptの状態に戻してください 注 質問内容により作成したCCCは、全て削除して下さい。 >CSSレイアウトに変更したところ背景が表示されません。 <body>を<BODY onload="getInfo;">に変更 <script type="text/javascript">の下にfunction getInfo();を追加 私が同じ作業したときたしか上記回答同じ作業をした記憶しています。 以上・
その他の回答 (2)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#1>CSS内のOutlineの部分に「 background-image:url(' , wall[rnd] , ');」を入れるとレイアウトが崩れてしまいます。 wall[rnd] は、スクリプトで作られた変数ですので、CSS記述の中にスクリプトの記述を埋め込むことはできません。 質問文の中のスクリプトでは、スクリプトによってスタイルシート記述を書き出しているので、更にCSSで記述する必要はありません。 スクリプトで(CSS記述を書き出すのでなくて)全部やろうとするなら、style プロパティでスクリプトから設定することになろうかと思います。
お礼
お礼が遅れてすみませんでした。 ご回答有難うございます。 wall[rnd] も変数になるんですね。 style プロパティからの方法、参考にさせていただきます。
- steel_gray
- ベストアンサー率66% (1052/1578)
これだけではなんともいえません。 提示されたソースは間違いがいくつかあるけど、これはコピペしないで手打ちしたミスですよね? もし実際のソースからコピペしたものなら以下の点を修正してみてください。 document.write('<style type="text/css">ontline {~ ↓ document.write('<style type="text/css">#outline {~ ただ、この間違いだけでは背景画像が表示されなくなるだけで、javascriptのエラーが起きたりレイアウトが崩れる原因にはならないはずです。 やはり再現できる程度のソースを補足してもらわないとこれ以上の原因探しは難しいです。
お礼
ご返答有難うございます。 ソースを直してみましたが、背景画像は表示されませんでした… HTMLとCSSを別ファイルにしてあって以下のようなソースになってます。 【HTML】 <head> <script type="text/javascript"> wall = new Array(); wall[0] = "aaaaaaaaaaaaaaa.jpg"; wall[1] = "bbbbbbbbbbbbbbb.jpg"; wall[2] = "ccccccccccccccc.jpg"; rnd = Math.round(Math.random() * (wall.length - 1)); document.write('<style type="text/css">#outline{ background-image:url(' , wall[rnd] , '); }</style>'); </script> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="outline"> <div class="outline-marign"> <div class="left"></div> <div class="right"></div> <div class="both"></div> </div> </div> </body> 【CSS】 body { text-align:center; } #outline { width:750px; text-align:left; margin:0 auto; } .outline-margin { margin:0 10px; } .center-left { float:left; width:500px; } .right { float:right; width:120px; } .both { clear:both; } CSS内のOutlineの部分に「 background-image:url(' , wall[rnd] , ');」 を入れるとレイアウトが崩れてしまいます。 Outlineと関連するどこかに、この記述を置かなければいけないのでしょうか?
お礼
お礼が遅れてすみませんでした。 ご回答有難うございます。 function での方法もあるのですね。 参考にさせていただきます。