Class List Drill

Add, remove, toggle, and check CSS classes with classList.

Player card

Jordan

Forward · #12

Current classes: (none extra)

Use Contains? to check a class.

classList controls

is-starter

is-bench

is-highlighted

Important HTML

Looks live in CSS. JavaScript only flips class names on the card.

<article id="player-card" class="player-card-demo">
  <h3>Jordan</h3>
  <p>Forward · #12</p>
</article>

Important JavaScript

Flip CSS class names without rewriting the whole class attribute.

playerCard.classList.add("is-starter");
playerCard.classList.remove("is-bench");
playerCard.classList.toggle("is-highlighted");
const hasClass = playerCard.classList.contains("is-starter");