- ベストアンサー
Javascriptで外部CSSの値が参照されない
- Javascriptでdiv要素の外部スタイルシート化したいが反応しない
- Javascriptを使用して外部CSSの値を参照できない
- Javascriptで外部スタイルシートを適用しても、div要素のスタイルが反応しない
- hana-fuji
- お礼率41% (7/17)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No1です。 CSSを外部化してテストしたとき ネスケで開いて、「ClickME」をクリックしたら 下に展開されたので動いたと思っていたのですが 補足を受けて再度IEでもチェックしたら 外部化した状態では動いてませんでした。ごめんなさい！ CSSの記述の問題かなと思っていたのですが Javascriptの作りとして 直接style設定しないとだめなのかもしれませんね。 とりあえず、「外部化して動いた」ということを訂正させていただきます。
その他の回答 (2)
- SAYKA
- ベストアンサー率34% (944/2776)
外部cssを参照するlinkタグがscript記述より後に来てるとかいうオチは無い？
補足
exampleHeaderは外部化しても問題ないのですが examplePanelがどうも動いてくれません。 <div id="examplePanel"></div>の下部に記載する javascript記述の部分も <script type="text/javascript" src="スクリプト名"></script> のような外部化ができるのかはわかりませんが できたらとてもありがたいです。
- RH01
- ベストアンサー率45% (37/82)
こんにちは。 スタイルシートを外部化しなければ動いているんですよね？ まずは、チュートリアルにある通り、スタイルをdivに直接設定する方法で動作することを確認してみてください。 試してみたのですが、そのままで動作しているのであれば スタイルを外部化しても 問題なく動きました。 スタイルシートを外部化することがよくわからないのであれば 以下をご参照ください。 まず、外部スタイルシートを作ります。 （すでにあるならそれに追加で記述してもOKです） 例として test.css とします。 ■test.cssの記述 ---------------------- Divに設定してあったスタイルを そのままコピペでOKです ---------------------- #exampleHeader{ position:relative; width:150px; height:20px; top:0px; left:0px; background:#3b587a; text-align:center; color:#FFFFFF; z-index:1;" } #examplePanel{ position:relative; width:150px; height:1px; top:-1px; left:0px; background:#a6bbcd; overflow:hidden; z-index:0; text-align:left; } ■HTML側の設定：CSS -------------------------- すでに外部スタイルシートがあってそれに追加したなら必要ない設定ですが、新しく外部スタイルシートを設定したなら <head>の中に以下を記述してください。 ※test.cssの場合の記述なので、ファイル名はご自身でつけた名前に変更 -------------------------- <link href="test.css" rel="stylesheet" type="text/css"> ■HTML側の設定：DIV -------------------------- スタイル部分を削除すれば良いので ↓こんな感じになるはずです -------------------------- <div id="exampleHeader" onclick="runAnimation(animationObject, this)"> Click Me </div> <div id="examplePanel"> Content </div>
補足
親切な回答ありがとうございます。 すみません補足説明をしなければなりません。 #exampleHeaderの部分は外部ファイル化したところ問題なく動くのですが、 #examplePanelの部分の領域を広げるために次のように変更しています。 ↓変更前↓ style="position:relative;width:150px;height:1px;top:-1px;left:0px;background:#a6bbcd;overflow:hidden;z-index:0;text-align:left;" ↓変更後↓ style="width:100%;height:0px;top:-1px;left:0px;overflow:hidden;z-index:0;" position:relative;←を削除 width:150px;→width:100%;に変更 など色々変えてしまったのがまずいのか 外部化したとたんに反応しなくなってしまいます さらに<div id="examplePanel"></div>の下に記述する javascript部分を少し変更しています <div id="examplePanel"> コンテンツ部分 </div> <script type="text/javascript"> var animationObject = new AnimationObject('examplePanel'); animationObject.AddFrame(new AnimationFrame(0, -1, 690, 560, 500)); function runAnimation(animation, header){ if(header.expanded){ animation.RunBackward(); header.expanded = false; }else{ animation.RunForward(); header.expanded = true; }} </script> 外部化せずに１枚のページで記述していると問題なく動くのですが 質問のように外部化したとたんに反応しなくなってしまいます あいにくjavascriptには詳しくないため スクリプト部分も外部化できたらいいのですが 現状では解決策がわからず困っております よろしくお願い致します。
お礼
時間があるときにもう少し自分なりに試行錯誤してみようと思っています。 試して回答をしていただいた事にとても感謝をしております。 ありがとうございました。