ywork2020.com

Title

アドクラスメソッドを使えば、セレクターにclass属性を追加できる

addClassメソッドの概要

jQueryのaddClassメソッドを使うと、セレクターに指定したHTML要素やid属性をターゲットにしてclass属性を追加することができます。

実機サンプル

答え: id="idAnswer"
innerText

実行: ボタンをクリックすると答えを表示している要素にclass属性を追加します。

サンプルコード

<head>
	<meta charset="utf-8">
	<title>jQuery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<style>
		.clsTestClass{border: solid 2px #000;}
	</style>
</head>
<body>
	<p id="idAnswer">innerText</p>
	<script>
		$("#idAnswer").addClass("clsTestClass");
	</script>
</body>
サンプルコードではボダンがクリックされた時の処理は、混乱を避ける為に掲載していません。
ボタンがクリックされたらscript要素の中のコードが実行されると思って下さい。

addClassメソッドのサンプルコードの要点

  1. 答えを表示しているP要素にid属性="idAnswer"の識別子を設定しています。
  2. jQueryのターゲットセレクターにidAnswerを指定しています。
  3. ターゲットのclass属性にaddClassメソッドを使って"clsTestClass"を代入しています。

addClassメソッドの補足

このメソッドに類似した他のメソッドが存在しますので、必要があれば関連リンクを参照してください。