クラスを削除する方法

JavaScriptを使用して要素からクラス名を削除する方法を学びます。

ボタンをクリックしてクラスを削除！

クラスを削除

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

この例では、ボタンを使用して以下からクラスを削除します。 id="myDIV" の <div> 元素から削除します。 "mystyle" クラス：

<button onclick="myFunction()">試してみる</button>
<div id="myDIV" class="mystyle">
  これはDIV要素です。
</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.remove("mystyle");
}

自分で試してみる

関連ページ

チュートリアル：クラスを切り替える方法

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

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

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