jQuery CSS、class属性の編集

jQueryを使用してCSSの編集、class属性の追加、削除をやります。

ソース

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Hello World</title>
<style type="text/css">
.cls {
	/* 背景色 */
	background-color: blue;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
	$(function() {
		$("h1").css("color","blue");
		$("h2").addClass("cls");
		$("h3").removeClass("cls");
	});
	$(function() {
		$("input").click(function(){
			$("h4").toggleClass("cls");
		});
	});
</script>
</head>
<body>
	<h1>jQueryでCSSを変更します($(&quot;h1&quot;).css(&quot;color&quot;,&quot;blue&quot;);)</h1>
	<h2>jQueryでCLASSを追加します($(&quot;h2&quot;).addClass(&quot;cls&quot;);)</h2>
	<h3 class="cls">jQueryでCLASSを削除します($(&quot;h3&quot;).removeClass(&quot;cls&quot;);)</h3>
	<h4>jQueryでCLASSを切り替えます($(&quot;h4&quot;).toggleClass(&quot;cls&quot;);)</h4>
	<input type="button" value="jQueryでCLASSを切り替えます" />
</body>
</html>

実行イメージ

CSSの編集

CSSの編集を行うには、cssメソッドを使います。要素.css(CSSのプロパティ,CSSの値)の形式で指定します。

class属性の追加

class属性を追加するには、addClassメソッドを使います。要素.addClass(class属性)の形式で指定します。

class属性の削除

class属性を削除するには、removeClassメソッドを使います。要素.removeClass(class属性)の形式で指定します。

class属性の編集

class属性を切り替えるには、toggleClassメソッドを使います。要素.toggleClass(class属性)の形式で指定します。

ページのトップへ戻る