- ベストアンサー
JavascriptでCSSを読み込んで適用させる方法
- Javascriptを使って<body>タグ内でCSSを読み込んで適用させる方法について教えてください。
- ページ読み込み時に自動でCSSを適用させる方法について、特にFireFox3での対策方法について知りたいです。
- 直接<head>タグ内でCSSを読み込む方法ではなく、Javascriptを使用して<body>タグ内でCSSを読み込んで適用させる方法を教えてください。
- idhokanohi
- お礼率58% (48/82)
- JavaScript
- 回答数4
- ありがとう数21
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
>もちろん<head>内で直接読み込めばいいよとかはなしですよ？ あるいみ正解。jsでヘッダにlinkタグを組みこみます。 そもそもスタイルシートはheadにしか書けないはずなので、 少なからずこれに似たような形になると思います。 html <html> <head> <script type="text/javascript" src="roadcss.js"></script> <script type="text/javascript"> window.onload=roadcss </script> </head> <body> test </body> </html> roadcss.js function roadcss(){ var tag=document.createElement('link'); tag.setAttribute("tyle","text/css"); tag.setAttribute("rel","stylesheet"); tag.setAttribute("href","http://file.tubamesound.blog.shinobi.jp/clap.css"); document.getElementsByTagName('head')[0].appendChild(tag); }
その他の回答 (3)
- yambejp
- ベストアンサー率51% (3827/7415)
あ、bodyで呼び出したかったんでしたっけ・・・ <html> <head> ・・・ </head> <body> test <script type="text/javascript" src="roadcss.js"></script> <script type="text/javascript"> window.onload=roadcss </script> </body> </html> でいけるんじゃないかなぁ・・・
お礼
おや、わざわざ補足ありがとうございます。 window.onload=roadcss(); じゃなくてもいいのかな？ 私はroadcss.jsの最後にroadcss();で処理しました。 とにかく解決できた。 ありがとうございました。
- pick52
- ベストアンサー率35% (166/466)
と思ったら、 document.createStyleSheet() はIE(Trident)専用の メソッドのようです。 他のブラウジングエンジンにも対応するなら document.createElement('style'); を使用しましょう。
お礼
なるほど、そうだったのですね。便利なのに。
- pick52
- ベストアンサー率35% (166/466)
よく分かりませんが、恐らくこの書き方は不適切なのでは。 本来なら head内で読み込んで <body onload="roadcss();"> のようにした方がいいと思います。 こうしたくない或いはできない理由はなんでしょうか。
お礼
回答ありがとうございます。 しかし、<body>以下でしか改変できないという特殊な状態だとお考えください。<head>はいじれません。 あと、あの書き方って不適切なのでしょうか？ どこかのスクリプとみてて見つけて、 一応動くので使ってました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
おー、そうきましたか～ このjsを <body onload="roadcss();"> <script type="text/javascript" src="roadcss.js"></script> </body>で読み込んだりするのは やっぱり無理かなぁ・・・無理そうだなぁ・・・ 明日やってみます、ありがとうございました。