kishin 貴真

20150929

  /  DESIGNOTHERS

JavascriptにおいてのCSSの初期化

CSS 初期値

Javascriptを使ってDOM操作をしていると、CSSを初期値に戻したくなくことがある。

この場合の「初期値」とは、CSS規格で各プロパティに設定されている初期値のことではなく、サイト独自のCSSファイルに記述されている初期値のこと。

その点に関して実は今まで、後で元に戻す必要がある処理を行う場合には、変更する前にJavascript上の変数に初期値を記憶しておいて必要に応じて取り出して使用するという処理をしていたのだが、最近、別の処理を検証している時に、簡単に初期値に戻せる方法を見つけてしまったので覚え書きとして残しておく。もしかしたら周知のことなのかも知れないが…。

例えば、DOM操作の『.innerText』でノード内の文字列を取得したい場合、対象となるノードや親ノードのCSSにvisibility: hiddenが設定されていると『.innerText』が機能せずに読み込めないブラウザもあるのだが、そうした場合、一時的に対象ノードのvisibilityだけをvisibleに設定してから『.innerText』を実行すれば問題なく取得できる。

問題はそのあとで、一時的に変更したvisibilityが、親ノードからの継承によってhiddenだったのか、直接指定でhiddenだったのかを確認するには、ノードをさかのぼって面倒な検証をするしかないため想像以上に手間がかかる。継承によるものだったなら元に戻すにはvisibility: inheritを設定しなければならないし、直接指定であったならばvisibility: hiddenを設定しなければならない。

そういう手間を全て取っ払って初期状態に戻せるのが空文字を指定するという方法。
targetNode.style.visibility=“”;

空の文字列をvisibilityに指定すると、CSSファイルで指定されている初期状態に戻すことが可能で、色々検証した結果、これはvisibilityに限らずCSSの全てのプロパティで使用できる魔法のような方法であることが分かった。

displayだろうがopacityだろうがleftだろうがbackgroundだろうが、Javascript上でグリグリ動かした後に空文字を指定すると見事にCSSファイルで指定してある初期状態へと戻ってくれた。今まで知らなかったのが悲しくなってしまうほど呆気なくキレイさっぱり戻ってくれる。

使い方によってはとても便利に機能させることができるので、DOM操作をする際には頭の片隅に。

Twitter