jQueryで追加したstyle属性を全て削除する方法

jQueryでアニメーションなどを行うとインライン要素でstyle属性が追加されますが全て削除したい場合は、

$('#area *')

*で#area内の全ての要素を取得できるので、

$('#area *').removeAttr('style');

にすると、#area内の全てのstyle属性が削除されます。

デモはこちら

FirebugのHTMLで確認するとわかりやすいです。

例えば

$('#box01').animate({'left':'400px' , 'width':'400px' , 'height':'300px'} , 1500 , function() {
	
	$('#box02').animate({'left':'350px' , 'top':'250px'} , 1000);
	
});

のようなjQueryを実行するとソースコードでは

<div id="area">

	<div id="box01">
		
		<div id="box02"></div>
		
	</div>

</div>

が

<div id="area">

	<div id="box01" style="left: 400px; width: 400px; height: 300px;">
		
		<div id="box02" style="left: 350px; top: 250px;"></div>
		
	</div>

</div>

となり、style属性が追加されますので、先ほどの

$('#area *').removeAttr('style');

を実行するとstyle属性が削除されます。

アニメーションのリセットやリプレイなどに応用できます。