javascript で css

javascript でスタイル情報を扱うときにどうしようかというハナシ。そんなに大したことは言ってないっていうかただのまとめ + 妄想。たぶん車輪の再々々々々々々々々々々開発くらいじゃないかな。

まず greasemonkey script や vimperator plugin script なんかでは内部にデータとして持つほうが早い気がするので以下のようにリストと join() を使った見やすさ重視な書き方がいいかもしんない。

const styles = [
    'font-size   : 64px',
    'font-family : "ぷちはんど　ほそぺん"',
    'content     : "ゆっくりしていってね !!"',
].join(';');

こうしとくと簡単に書き換えがきく上に

element.setAttribute('style', styles);

みたいに適用も簡単。

でもこれだと新しいスタイルの追加は簡単だけど既存スタイルの書き換えとかが面倒っていうかやりたくない ( まぁ css の仕組み的にどんどん追加しとけば問題はないんだけど ) ので動的にいじるときはもうちょっと扱いやすくなるといいかなーとか思わないでもない。そこで出てくるのがオブジェクトなんだけど

function Styles(){}
Styles.prototype ={
    toString: function() {
        var tempArray = new Array;
        for(var key in this) {
            if(key == 'toString') continue;
            tempArray.push(key.replace(/_/g, '-')+':'+this[key]);
        }
        return tempArray.join(';');
    },
};

と定義しておいて

var css = new Styles;
css.font_size = '64px';
css._moz_opacity = 0.7;
css.content = '"ゆっくりしていってね !!"';
element.setAttribute('style', css);

みたいに使う感じにするとけっこう柔軟性が出る感じ。アンダーバーをハイフン代わりにするのは Perl の HTTP::Headers から借用したアイディアだけどけっこういいかもしんない。まぁここまで求められるのはそんなにないと思うのでたいていの場合 const + リスト + join() でいいと思うけど。