クラスの追加方法

JavaScriptを使用してクラス名を要素に追加する方法を学びます。

ボタンをクリックしてクラスを追加してください！

クラスの追加

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

クラス名を追加します id="myDIV" のdiv要素（この例では、ボタンを使用してクラスを追加しています）。

<button onclick="myFunction()">試してみる</button>
<div id="myDIV">
  これは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.add("mystyle");
}

自分で試してみる

関連ページ

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

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

参考マニュアル：HTML DOM Element classList属性

参考マニュアル：HTML DOM Element className属性