add/remove
Apply or remove named states.
Platform under construction
classList & Styles
classList lets JavaScript change state while CSS keeps control over the visual design.
panel.classList.add("is-open");
panel.classList.toggle("is-active", isActive);
panel.style.setProperty("--progress", "75%");
DOM & HTML Interaction
Use classes for visual states, not piles of inline styles.
The classList API can add, remove, toggle and check classes without rewriting the full class attribute.
Most visual changes should happen through CSS classes. JavaScript decides the state; CSS decides what that state looks like.
Inline styles are useful for dynamic values such as coordinates, progress or CSS variables, but they should not replace a design system.
toggle
Switch a class on and off.
contains
Check whether a class is present.
style property
Set truly dynamic inline values.
Examples
DOM code should be scoped, safe and visible in the interface.
State in JavaScript, styling in CSS
button.classList.toggle("is-active", selected);
button.setAttribute("aria-pressed", String(selected));
Styling every detail from JavaScript
button.style.background = "yellow"; button.style.color = "black"; button.style.borderRadius = "999px";
Code patterns
Reusable examples for quick reference.
These patterns are the DOM moves you use constantly: select, read, change, create, navigate and render.
Add a state class
Let CSS handle the design.
panel.classList.add("is-open");
Toggle with force
The second argument makes state explicit.
panel.classList.toggle("is-active", currentStep === 2);
Check state
contains reads the current class state.
const isOpen = panel.classList.contains("is-open");
Set a CSS variable
Inline values can feed CSS custom properties.
meter.style.setProperty("--progress", `${percent}%`);
Rules that matter
Keep the DOM predictable.
DOM APIs are powerful because they affect the live page. Use them with stable hooks, clear state and safe text updates.
Name state classes clearly
is-open and is-active communicate behavior.
Use the force argument
toggle(name, condition) avoids accidental flipping.
Keep CSS responsible for design
JavaScript should not become a stylesheet.
Update accessibility state too
Visual active state should match ARIA state where needed.
Use inline styles for dynamic values
Coordinates and progress values are good examples.
Avoid className overwrites
classList is safer when multiple classes exist.
Production thinking
A good DOM layer connects behavior to HTML without making the page fragile.
Why does this matter?
classList keeps behavior and visual design connected without mixing their responsibilities.
Accessibility
When class changes reveal, hide or select content, update focus and ARIA state as well.
Production note
Production teams can redesign CSS classes without rewriting JavaScript behavior.
SEO note
Class-driven interactions should not hide important crawlable content by default.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Rename active to is-active in HTML, CSS and JavaScript.
- Use toggle with a force argument.
- Set a CSS variable for progress.
Practice assignment
Do this before moving to the next topic.
- Add a class with classList.add.
- Toggle a class from a click.
- Keep ARIA state in sync.
Try it yourself
Toggle a state class
Self-check
Before you continue, prove that you understand classList & Styles.
If you can explain the DOM operation and its failure path, you are ready to use it in real UI code.
- Can you explain classList.add?
- Can you explain classList.toggle?
- Can you explain the force argument?
- Can you explain when inline styles are useful?
- Can you explain why CSS should own visual design?
Senior audit upgrade
Extra production context for classList & Styles.
Safe DOM default
Prefer textContent, createElement, templates and replaceChildren for normal UI rendering. Reach for innerHTML only when the markup is controlled and the risk is understood.
const item = document.createElement("li");
item.textContent = userInput;
list.replaceChildren(item);