問題 × 解決策

jQueryで設定したcssをリセットする方法

問題

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をリセットすることができます。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

one × 1 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧