2

jQuery を使用して要素レベルのインライン スタイルを適用し、基になる CSS クラス スタイル定義をオーバーライドします。

ここまでは問題ありませんが、これを元に戻し、要素のインライン スタイルを削除して、CSS ルールで定義されるプロパティにアニメーションを戻したいと考えています。

頻繁に 提供される解決策は、置換した値を保存し、後でアニメーション化してそれらに戻すことです。ただし、これはデフォルトの状態が変更されていないことを前提としています。持っている場合はどうなりますか？

例：

   <style>
       #foo { width: 100px;overflow:hidden; }
       @media all and (min-width:600px) {
           #foo { width: 200px; }
       }
   </style>
   <div id='#foo'>bar</div>

   <script>
   // at some point use clicks a toggle
   jQuery('#foo').animate({width:0});
   // now user resizes window, triggering change in (overridden) CSS style
   // ...
   // at some later point user clicks toggle again
   jQuery('#foo').animate( **something to remove inline style** );
   </script>

この例では、ユーザーが小さなブラウザー ウィンドウから開始するとします。のサイズ#fooは100pxです。トグルをクリックすると、0 までアニメーション化されます。次に、ユーザーはウィンドウのサイズを 600 ピクセル以上に変更し、200 ピクセルのレスポンシブ クラス スタイルをアクティブにします#foo。jQueryにこれを理解してアニメーション化するように指示するにはどうすればよいですか?

簡単な例

<style>
    .c { width: 50%; }
</style>
<div class='c' style='width:10%' >foo</div>

上記の場合、オーバーライドされたスタイル属性を無視して、クラスによって foo に定義された 50% の幅を見つけるために jQuery を使用する方法は?

4

3 に答える 3

2

興味深い問題です。

jquery 経由で適用された変更をロールバックする方法はないようです。ただし、要素のスタイル属性に変更を適用しているため、この問題を回避できる場合があります。

$('foo').removeAttr('style');

http://jsfiddle.net/bG2ty/1/のフィドルを参照してください。

ただし、もちろん、これは style 属性で定義された他の css を削除することに注意してください。

于 2013-07-15T13:28:24.220 に答える