問題
jQueryで設定したcssをリセットするには？
解決策
「 $('要素').removeAttr('style'); 」を記述する。
jQueryで設定したcssをリセットする
jQueryで設定したCSSが悪影響を及ぼすパターンは多々あります。
そんな時にjQueryで設定したCSSをリセットする方法をご紹介します。
DEMOはこちら
jQueryの処理により、赤字に設定されています。
HTMLの構築
jQueryで赤字に設定させておく用のテキスト：クラス「resettarget-text」と、その赤字の設定を取り消す用のボタン：クラス「reset-btn」を用意します。
<p class="resettarget-text">jQueryの処理により、赤字に設定されています。</p>
<p class="reset-btn">
<a href="#">クリックしてテキストの赤字設定を取り消す</a>
</p>CSSの構築
クラス「reset-btn」内のaタグに対し、CSSを設定します。
.reset-btn{
text-align: center;
}
.reset-btn a{
display: inline-block;
padding: 6px 12px;
color: #ffffff;
font-weight: bold;
letter-spacing: 1pt;
text-decoration: none;
background-color: #F15A24;
}javascriptの構築
最後にjavascriptを設定します。
クラス「resettarget-text」を赤字にする設定と、クラス「reset-btn」内のaタグに対し、クリックイベントでクラス「resettarget-text」の赤字設定を取り消す処理を記述します。
if($('.reset-btn').length){
$('.resettarget-text').css('color','#ff0000');
$('.reset-btn').click(function(){
event.preventDefault();
$('.resettarget-text').removeAttr('style');
})
}ポイント!
「removeAttr(‘style’)」を要素に対して実行することにより、要素に設定されたstyleをリセットすることができます。
コメント