element.classList.toggle()

document.querySelector()

document.getElementById()

document.addEventListener()

<div id="container" class="container blue"></div>
<button id="button" class="button">クラス名を切替</button>


// 問題1. コンテナの要素とボタンの要素を取得してください
// この下に解答してください
const contentElement = document.getElementById('container')
const buttonToggle = document.getElementById('button')

// 問題2. 問題1で取得したボタン要素にクリックイベントを設定し、クラス名を追加・削除を切り替えてください
// この下に解答してください
buttonToggle.addEventListener('click', () => {
  contentElement.classList.toggle('orange')
})


.button {
  border: 1px solid #333;
  background-color: #f0f0f0;
  padding: 2px 4px;
  margin-top: 16px;
  border-radius: 4px;
}

#container {
  width: 100px;
  height: 100px;
  border: 1px solid #333333;
  margin-bottom: 16px;
  border-radius: 8px;
}

.blue {
  background-color: #87cefa;
}

.orange {
  background-color: #ed8936;
}


// 問題1. コンテナの要素とボタンの要素を取得してください
// この下に解答してください


// 問題2. 問題1で取得したボタン要素にクリックイベントを設定し、クラス名を追加・削除を切り替えてください
// この下に解答してください


クラスを切替

element.className

クラスを設定

element.classList.add()

クラスを追加

element.classList.remove()

クラスを削除

演習

element.classList.contains()

if文

alert()

クラスが要素に存在するか確認

element.classList.replace()

クラスを置換

総合問題1-2

else節

総合問題2-2

CSSクラスの操作からスタイルの動的変更まで、JavaScriptを使ったDOMのスタイリング方法を実践的に学びます。
レイアウトや見栄えの調整手法を修得します。

webサイトに動きをつけたり、表示内容を切り替えたり、formの入力を制御するなど様々な処理について学んでいきます

JavaScript DOM操作コース

【基礎を学ぼう🔰】はじめて学ぶDOM操作入門

「JavaScript CSSスタイルをDOMで操作しよう」レッスンの総復習クイズです。