THE HAM MEDIA BLOG

４回にも分けてしまったのですが、CSSをDOM読み込み前にJavaScriptで読み込むあれこれをご紹介してきました。最後は、なくても良かったのですが、外部化したCSSをjQueryで追加する方法を紹介してこのシリーズは終了にしたいと思います。

DOM操作で関わるCSSで、それをJavaScriptが使える環境時のみに読み込ませて、且つ、DOM読み込み完了前に実行しておくという方法をここまで紹介してきました。

jQueryでhead内に外部CSS追加

今回のコードは、最初にjQueryでCSSを追加する方法を紹介したのとほとんど同じです。違う点はstyleではなく、linkタグであるということと、その２同様、CSSは別途外部化しておくくらいです。

■Script

$('<link />',{
    rel:'stylesheet',
    type:'text/css',
    href:'https://h2ham.up.seesaa.net/css/20100301.css'
}).appendTo('head');

とってもシンプル。最後に.appendTo()メソッドでhead内に追加しておかないと適用されません。忘れずに。もちろんhead内でなくても、bodyでも大丈夫ですが、特に理由がないのであれば、head内にした方が無難です。

■CSS

.text div#test01{
    background-color:#202020;
}

.text div#test01 p{
    padding-left:10px;
    color:#ffffff;
    font-weight:bold;
    background-color:#333333;
}

前回までのと同様のCSSで、外部化されています。

■デモ

前回まで同様、CSSがうまく適用されていると、黒背景に白文字になっています。適用されていない場合は、白地に黒文字です。

細かく分けてしまったのですが、紹介は以上です。jQueryを利用しているのであれば、今回の方法が一番シンプルだと思います。動作軽くしたいなどのことであれば、その２で紹介した方法がオススメです。

注意点？

ちょっと未確認なのですが、今回の方法を最後に持ってきたのってのは、実はIEでうまくCSSが適用されない場合がでたので、検証してたら最後になったという。。。

今回はjQuery1.4からの方法で書いていますが、そのhrefの部分、ローカル環境で確認しようと、ローカル中のCSSを相対指定でいれるとIEでCSSが適用されませんでした。他のFirefoxやChromeなどでは問題なく表示されたのですが、IEだけは6〜8いずれもダメでした。http://からの絶体指定に切り替えたところIEでも適用されたという。その違いがよくわかっていないのですが、もしかしたら今回の方法では、絶対パスでの指定が必要かもしれません。

ちなみに、今回の書き方でなく、attr()メソッドでの追加も同様にうまく適用されませんでした。

利用する際は、ブラウザチェックをおわすれずに。