Code Lab BetaBUILD. RUN. DISCOVER.
Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.
Loading…
Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.
Loading…
Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.
JAVASCRIPT DOM / CHAPTER 04 / Learn / LESSON 04
classList manages CSS classes without manual string gluing. add("active") adds; remove("hidden") removes; contains("active") checks.
Classes often show/hide style. Preview reflects changes when CSS is in the initial HTML.
Mini example:
const card = document.querySelector("#card"); card.classList.add("active"); card.classList.remove("dim");
Common mistake: className = "active" (wipes other classes); or add without a string.
<style>.active{outline:2px solid #67e8f9}.dim{opacity:.4}</style><div id="card" class="panel dim">Card</div><p id="hint" class="hidden">Tip</p>classList.add / remove without wiping other classes.
Press Run — HTML loads in a sandbox iframe; Stop removes the iframe (also kills infinite loops).
›