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を設定»