THE HAM MEDIA BLOG

JavaScript OFF環境に優しく? その2

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
CSS
javascript

JavaScript OFF環境に優しく?その2

昨日は、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 = "http://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;
}

■デモ

サンプルテキスト

サンプルテキスト

サンプルテキスト

もっとシンプルなコードにできるようなできないような・・・うーん。

次回はメンテナンス性は落ちますが、Script中にCSSをまとめて追加しておく方法をご紹介(予定)

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。