THE HAM MEDIA BLOG

昨日まで、JavaScript OFF環境の人にも優しく(動きはなくとも見られるように)するために、JavaScriptの動的部分に関係するCSSについてはJavaScriptで追加する方法を紹介してきましたが、今回もその続き。

前回はjQueryを使わずにJavaScriptで外部CSSを追加しましたが、今回は直接CSSを書き込む方法。jQueryでも書いた直接CSSをJS内でCSSを書く方法です。

今回もあらかじめ書いておきますが、メンテナンス性が下がるので、おすすめする方法ではありません。サイトの構造とかメンテナンス性を考えるのであれば、前回の方法をおすすめします。

JavaScript内でCSSを追加する

今回の方法は、Retweetボタンをつける方法で紹介した「Easy Retweet Button」のスクリプト内でも使われていましたので、それを紹介です。

コードは下記のようになります。

■Script

window.setting = {
    styling:'.text div#test01{background-color:#202020;}'+
    '.text div#test01 p{padding-left:10px;color:#ffffff;font-weight:bold;background-color:#333333;}'
};
if ( setting.styling ) {
    var style = document.createElement("style");
    var head = document.getElementsByTagName('head')[0];
    style.type = "text/css";
    
    try {
        style.appendChild( document.createTextNode( setting.styling ) );
    } catch (e) {
        if ( style.styleSheet ) {
            style.styleSheet.cssText = setting.styling;
        }
    }
    head.appendChild( style );
};

先ほどの参考のプラグインとちょっとだけ違う。プラグイン中では、適用させたいstyleをbodyの最後に表示させていたのですが、自分はstyleの書き入れる位置の慣習にならって、head内で追加するようにしました。

ifで条件分岐させなくてもよかったなどなど、他にも修正できる箇所あったのですが、とりあえず今回は上記のコードで。

■CSS

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

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

■デモ

前回同様、CSSがうまく適用されていたら、黒背景に白文字になります。

書き方の注意点

jQueryの時のも同じですが、JS内に直接CSSを書いて加える今回のような場合、変数に入れる際は、クォーテーション内にCSSを書く必要があります。複数行になる場合は、一度クォーテーションで囲い、「+」を行末に入れることで、次の行とつなぐことができます。面倒な場合は一行にまとめてしまうなどで対応したほうがいいでしょう。