jQuery samples - jQueryで設定したCSSを初期化する方法

jQuery samples - jQueryで設定したCSSを初期化する方法

本エントリーは「to-R JavaScript Advent Calendar 2015」15日目のエントリー、今回のjQuery samplesは、jQueryで設定したCSSを初期化する方法についての解説です。

jQueryのcssメソッドでスタイルを設定するとHTMLのstyle属性にそのスタイルが設定されてしまいます。

例えば次のように#fill押下時に色を設定して#resetに元に戻したい場合、次のように$("#box").css("background","red");と設定してしまうと、#reset押下時に<div id="box" style="background:red"></div>と設定されてしまい:hoverによるマウスオーバーの処理が反映されません。

<button id="fill">fill</button>
<button id="reset">reset</button>
<div id="box"></div>
#box{
	width:100px;
	height:100px;
	background:red; 
}
#box:hover{
	background:blue;
}
$(function(){
	$("#fill").click(function(){
		$("#box").css("background","green");
	});
	$("#reset").click(function(){
		$("#box").css("background","red");
	});
});

以下がサンプル。

See the Pen jQuery samples - jQueryで設定したCSSを初期化する方法 by Kazuma Nishihata (@to-r) on CodePen.

これは次のように$("#box").css("background","");と空の値を指定することで要素に指定されたstyle属性の内容のみを初期化することができます。これにより#resetが押されたタイミングで:hoverによるマウスオーバーの処理が復活します。

$(function(){
	$("#fill").click(function(){
		$("#box").css("background","green");
	});
	$("#reset").click(function(){
		$("#box").css("background","");
	});
});

以下がサンプル。

See the Pen jQuery samples - jQueryで設定したCSSを初期化する方法2 by Kazuma Nishihata (@to-r) on CodePen.

スポンサードリンク

«IE6で透過PNGを利用するためのTIPS | メイン | jQuery samples - jQueryでCSSの!importantを設定»