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'
簡単でしょう?
で、
あんまり使う必要なくね?
うんうん。そう思う
でも
さっき便利な使い方を 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]; // キャッシュされてるものを戻す
長ったらしいけど、これが一番効率的だと思います。
もちろん、全プロパティを走査すれば簡単にキャッシュできるのですが、それだと激重です。