JavaScript、Ajax、HTML5(API)、Ruby…Web及び関連技術の実験&情報公開&制作物紹介。

動的にCSSを追加 append_css.js

| コメント(0) | トラックバック(0)

なんか探せばどこかにありそうなツールですが、仕事用に作ったものを一般公開してみます。

WebページにCSSを追加するJavaScriptです。
ポイントは、外部CSSファイルではなく、要素への直接適用でもなく、CSSをテキストで指定する、という点。

使用例

appendCSS(
    ".debug { display:block !important; }" +
    "#dest1 { color: #ef0000; font-weight: bold; }"
);

デモページ

http://www.antimon2.atnifty.com/works/append_css/
(リロードするたびに表示が変わります)

ダウンロード

取り敢えず.jsファイルへの直リンクを張っておきます。

http://www.antimon2.atnifty.com/works/append_css/append_css.js

動作環境

  • IE6以降
  • Firefox 3.0.x以降(2.xでも多分動作)
  • Safari 2.0.x以降
  • Google Chrome 4.0以降
  • Opera 9.6以降

仕様

グローバルスコープ(windowオブジェクト)に1つの関数 appendCSS() を追加します。

特徴

内部的には、引数で受け取ったテキストを、そのまま内容としてstyle要素を生成(document.createElement())して<head>内に追加しているだけです。

比較

CSSを動的に追加するという意味で、機能的にはMooTools(more)のAsset.css()とほぼ同様です。 違いは以下の通り:

  • Asset.css()
    ...外部のCSSファイルを読み込む
    • ○ 追加するスタイルの管理・編集が楽
    • △ MooTools に依存(※1)
    • × サーバーへリクエストが発生する
  • appendCSS()
    ...テキストで直接CSSの内容を指定する
    • ○ サーバーへ追加のリクエストは発生しない
    • ○ 他のライブラリに非依存
    • × 追加するスタイルを運用で変更しにくい

※1:やってることは appendCSS()と同じくらい単純なので、MooToolsに依存しない形に書き直すのは全然難しくないですけれど。

免責事項

著作権は Antimon2 が保持します。MITライセンス日本語参考訳)に従います。
Copyright © Antimon2, MIT-style license.

トラックバック(0)

トラックバックURL: http://www.antimon2.atnifty.com/mt5/mt-tb.cgi/73

コメントする

カテゴリ

月別 アーカイブ

OpenID対応しています OpenIDについて

このブログ記事について

このページは、あんちもん2が2010年5月 8日 11:19に書いたブログ記事です。

ひとつ前のブログ記事は「Rubyでちょっと込み入った変数の初期化」です。

次のブログ記事は「【覚書】[Ruby]トップレベルに定義したメソッドと同名のメソッドをクラスで定義した場合」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。