JSFiddle - React, Tailwind, and code Playground

by huuzoo

HTML

<div id="target" class="apple">ターゲット</div>
<button onclick="classToggle();">toggleクラス</button>
<button onclick="classCheck();">クラス名判定</button>

<p>クラス名：<span id="output"></span></p>

CSS

.apple {
  color: red;
}

JavaScript

function classToggle() {
	var target = document.getElementById('target');
	target.classList.toggle('apple');
}

function classCheck() {
	var target = document.getElementById('target');
	var output = document.getElementById('output');
  
	if (target.classList.contains('apple') == true ) {
		output.innerHTML = 'appleが含まれています。';
	} else {
 		output.innerHTML = 'appleが含まれていません。';
  }

}