ywork2020.com

Title

要素にclass属性の追加と削除を交互に行う

目次 (INDEX)

toggleClassとは

ここで説明する toggleClass とは次の語句からなるjQueryのメソッドです。
toggle
読み: トグル
意味: On, Off のような切り替えの操作
class
読み: クラス
意味: 部類、種類、階級、層

目次に戻る

toggleClassメソッドの概要

このメソッドは、セレクターに該当する要素に対してclass属性を追加、または削除を交互に繰り返します。

追加、または削除する class 属性の値は、メソッドの引数に文字列として指定します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

$(Selector).toggleClass(strClassName);

目次に戻る

サンプルコードと実行結果

ここでは、toggleClass を使ってdiv要素に clsTestClass という値のclass属性を追加したり、削除したりするボタンを設置してみました。

clsTestClass には予め、CSSでスタイルを設定していますので、class属性の有り、無しでスタイルの適用が見て取れます。

サンプルコード: CSS
<style>
	.clsTestClass{
		background-color: ##lightpink;
		font-style: italic;
	}
</style>
  • 02: .clsTestClass (CSSセレクターです。class="clsTestClass" のある要素ということです。)
  • 03: background-color (背景色です。ライトピンクに設定しています。)
  • 04: font-style (文字スタイルです。イタリックに設定しています。)
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div>innerText</div>
	<button id="idButton">toggleClass</button>
	<script>...</script>
</body>
  • 06: div (このサンプルでは、この要素に class属性を追加、及び削除をできるようにしています。)
  • 07: button (ボタンです。クリックすると、scriptの 02 ~ 04 のコードが実行されます。)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$("div").toggleClass("clsTestClass");
	});
</script>
  • 03: $("div").toggleClass("clsTestClass") (clsTestClass という値で div要素にclass属性を追加、及び削除します。)
実行結果:
innerText

目次に戻る