IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

style.cssText の使い処に関する考察

JavaScript CSS

cssText って知ってますか？

cssText っていいうのは CSSRule オブジェクトとか CSSStyleDeclaration が持っている情報を css ファイルに書く形式の文字列にしてくれる機能です。
乱暴に言ってしまえば、 css 系のオブジェクトが持っている innerHTML みたいなものです。

具体例を見てみましょう。

こんな感じの body があるときに

<body style="margin: 1em; padding: 1em; border: 1em">....</body>

こんな感じで使えます。

alert(document.body.style.cssText); // 'margin: 1em; padding: 1em; border: 1em'

簡単でしょう？(ボブ略

設定も出来ますよ

こんな感じ

// さっきの続き
document.body.style.cssText = 'width: 100px'; 
alert(document.body.style.margin);  // ''
alert(document.body.style.padding); // ''
alert(document.body.style.border);  // ''
alert(document.body.style.width);   // '100px'

簡単でしょう？

クロスブラウザ？

Safari 3, Opera 9, Firefox 2, IE 6, IE 7 で動いたよ！

パフォーマンスは？

めっちゃ適当に計ってみたら、普通に style.width = '100px'; みたいに一個一個入れてくより、目安 2 〜 3 割遅いことが分かった。

で、

あんまり使う必要なくね？
うんうん。そう思う

でも

さっき便利な使い方を 3 つ思いついたので紹介します。

デバッグ時に値を見るとき

これは普通に便利。

いちち style.xxxx を書くのがめんどくさいとき

うん。あるある。

スタイルをキャッシュしておいて戻したりしたいとき（本題）

たとえば、キャッシュしておいて

var style = element.style;
var cache = style.cssText;

いろいろいじっても、元に戻せる機能を付けたいとか。

style.cssText = cache; // これだけで元の style に戻せる。

便利！
ちなみに
実はこれよりもっと効率的な方法があるのですが、その方法は IE では動きませんでした。その方法は以下。

// キャッシュするとき
var style = element.style;
var cache = {};
for (var i = 0, l = style.length/*←IEではこれがない*/; i < l; i ++) {
    var n = style[i]; // ←IEではこれもない
    cache[n] = style[n];
}

// 戻すとき
for (var i = 0, l = style.length; i < l; i ++) {
    var n = style[i];
    if (!(n in cache)) { // キャッシュにないプロパティは削除
        style[n] = '';
    }
}
for (var n in cache) style[n] = cache[n]; // キャッシュされてるものを戻す

長ったらしいけど、これが一番効率的だと思います。

もちろん、全プロパティを走査すれば簡単にキャッシュできるのですが、それだと激重です。

まとめ

style.cssText ってべんりー！