JavaScriptのstyleを使ったスタイルのリセット
あるイベントをきっかけに要素を 非表示にすることにしたとします:
elem.style.display = 'none';
今度は、それを再び表示したいと
決めました。これは、プロパティ
displayを
元の値に戻す必要があることを意味します。
例えば、次のように:
elem.style.display = 'block';
問題は、これが不便だということです。
元の値は必ずしも
blockだったとは限りません。
flexやinline-block、
あるいは他の何かだったかもしれません。
それは私たちがCSSファイルで設定した値かもしれないし、
ブラウザのデフォルト値から来ているかもしれません。
正しい値を追跡するのは難しいです。
幸いなことに、プロパティの元の値を簡単に 戻す方法があります。 プロパティの値として空の文字列を 代入するだけです:
elem.style.display = '';
divと2つのボタンがあります。最初のボタンをクリックすると divを非表示にし、2番目のボタンをクリックすると表示します。
divと2つのボタンがあります。最初のボタンをクリックすると divの色を赤に変え、 2番目のボタンをクリックすると元の色に戻します。