HTML と CSS の設計思想により、
スタイルは CSS によって適用することが推奨されています。
初期の CSS では困難だったアニメーション効果についても
CSS3 ではかなりのものが付与できるようになりました。
そのため、スライドショーでの多彩な演出、
hover、mouseover、mouseout、mouseenter、
mouseleave、touchstart、touchend などの
ユーザの操作にあわせてフィードバックを返したい
場合など、class属性値と CSS を組み合わせて
表現することが多いのではないかと思います。
しかし、CSS2 あるいはそれ以前で
アニメーション効果を付与したい場合などは
Javasccript を使って直接的に要素にスタイルを
適用する必要性があるかもしれません。
複雑なアニメーション効果を付与したり
古いプログラムを活用したい場面を考えると、
jQuery を使って直接的に適用したスタイルを
もとの CSS で指定されたスタイルに戻したい
と悩むことがあるかもしれません。
今回は jQuery で直接上書きしたスタイルを
元の状態に戻すための方法をお話します。
具体的な解決方法
上記は 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万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
※ご契約前のコメントやメールでのやりとりは無料です。
