JavaScript OFF環境に優しく？その２

2010/03/01

カテゴリ：: JavaScript

タグ：: CSS; javascript

JavaScript OFF環境に優しく？その２

昨日は、jQueryでCSSを追加する方法を書いたのですが、本日はjQueryを使っていない環境でもJavaScriptでCSSを読み込む方法を書いておきます。

昨日のところにも書いたのですが、あくまでこのJavaScriptでCSSを追加する方法は、JavaScriptでDOMを操作するときに、DOMの読み込みが完了するまえに適用させておきたいCSSがある場合に利用しておくほうがいいかなというものです。これを利用することで、JavaScriptがOFFの環境でも、動的に動くことはなくなりますが、問題なくサイトを見ることができるようになります。

あくまでJavaScriptでDOMを操作する箇所へ適用するもので、それ以外は通常通り外部CSS化したCSSをlinkで指定するようにしましょう。

JavaScriptで追加

今回はjQueryを使わずに外部CSSを追加してみます。

■Script

var style = document.createElement("link"),
    head = document.getElementsByTagName('head')[0];
style.type = "text/css";
style.rel = "stylesheet";
style.href = "https://h2ham.up.seesaa.net/css/20100301.css";
head.appendChild( style );

■CSS

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

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