<p id="content" class="orange">クラス名にorangeが存在するか確認するよ</p>
<button id="button" class="button">クラス名を確認</button>


// 問題1. テキストの要素とボタンの要素を取得してください
// この下に回答を記述してください
const contentElement = document.getElementById('content')
const buttonContains = document.getElementById('button')

// 問題2. 問題1で取得したボタン要素にクリックイベントを設定し、特定のクラス名が存在するかどうかを確認してください
// この下に回答を記述してください
buttonContains.addEventListener('click', () => {
  if (contentElement.classList.contains('orange')) {
    alert('orangeクラスが存在しています。')
  }
})


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

.orange {
  color: #ed8936;
}


element.classList.contains()

if文

alert()

document.querySelector()

document.getElementById()

document.addEventListener()

// 問題1. テキストの要素とボタンの要素を取得してください
// この下に回答を記述してください

// 問題2. 問題1で取得したボタン要素にクリックイベントを設定し、特定のクラス名が存在するかどうかを確認してください
// この下に回答を記述してください


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

element.className

クラスを設定

element.classList.add()

クラスを追加

element.classList.remove()

クラスを削除

演習

element.classList.toggle()

クラスを切替

element.classList.replace()

クラスを置換

総合問題1-2

else節

総合問題2-2

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

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

まずは必要なスキルを確認しましょう！