jQuery で CSS を直接変更した要素のスタイルを元に戻すには

要素のスタイルは CSS によって指定することが推奨されますが、jQuery など、Javascript によって直接的にスタイルを指定することもできます。jQuery によって上書きしたスタイルは $elm.css({color:”}); などのように値に空欄を指定することで、CSS で指定された元の状態に戻すことができます。

HTML と CSS の設計思想により、
スタイルは CSS によって適用することが推奨されています。
初期の CSS では困難だったアニメーション効果についても
CSS3 ではかなりのものが付与できるようになりました。

そのため、スライドショーでの多彩な演出、
hover、mouseover、mouseout、mouseenter、
mouseleave、touchstart、touchend などの
ユーザの操作にあわせてフィードバックを返したい
場合など、class属性値と CSS を組み合わせて
表現することが多いのではないかと思います。

しかし、CSS2 あるいはそれ以前で
アニメーション効果を付与したい場合などは
Javasccript を使って直接的に要素にスタイルを
適用する必要性があるかもしれません。

複雑なアニメーション効果を付与したり
古いプログラムを活用したい場面を考えると、
jQuery を使って直接的に適用したスタイルを
もとの CSS で指定されたスタイルに戻したい

と悩むことがあるかもしれません。

今回は jQuery で直接上書きしたスタイルを
元の状態に戻すための方法をお話します。

具体的な解決方法

2秒ごとにclass属性値をトグル (off)

上記は 2秒毎に以下の2種類のスタイルを交互に切り替えます。

  • class=”article-552-off” (color:blue;)
  • class=”article-552-on (color:red;)


上記のボタンを押してみて下さい。

上側のボタンは以下のように jQuery で
直接的に文字色を green に変更します。

$elm.css({color:'green'});

下側のボタンは以下のように設定値を空欄にします。

$elm.css({color:''});

on/off の切り替えと対応して、
文字色も交互に red/blue に変化します。

jQuery でスタイルを直接上書きすると
それが最優先で適用されるため、
on/off が切り替えられても文字色は
常に green で固定されます。

これを jQuery で設定値を空欄にすると
また CSS で規定された元のスタイルが適用される形へと戻ります。

Javascrip で指定したスタイルを無効にして、
CSS で指定された初期状態に戻すにはどうすれば…
という場合にヒントになれば幸いです。

お問い合わせについて

業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
ご契約前のコメントやメールでのやりとりは無料です。

お問い合わせフォーム

お急ぎの場合など、ただちに業務対応が必要な場合は、こちらのお問い合わせフォームをご利用ください。かきしちカンパニーお客様窓口が直ちに対応いたします。
※窓口へのお問い合わせ、お見積もりは無料です。


お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文 (必須)

Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*