クラスの切り替え方法

JavaScriptを使用して要素にクラス名を追加および削除してクラス名の切り替えを行います。

ボタンをクリックするとクラス名が切り替わります！

クラス切り替え

第1ステップ - HTMLの追加：

クラス名を追加する際に id="myDIV" の div 要素間でクラス名を切り替え（この例では、ボタンを使用してクラス名を切り替えます）。

<button onclick="myFunction()">試してみる</button>
<div id="myDIV">
  This is a DIV element.
</div>

第2ステップ - CSSの追加：

切り替えのためのクラス名を追加：

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

第3ステップ - JavaScriptの追加：

を取得 id="myDIV" の <div> 要素、および "mystyle" クラス間の切り替え：

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");
}

自分で試してみる

関連ページ

チュートリアル：クラスを追加する方法

チュートリアル：クラスを削除する方法

リファレンスマニュアル：HTML DOM Element classList 属性