🎨 Dynamic Styling and Classes

Three Ways to Style

JavaScript can change appearance through three distinct mechanisms. They aren't ranked best-to-worst — each shines in a different situation, and good code uses all three deliberately.

💡 Analogy — running the lights on a stage. A single element.style tweak is nudging one spotlight by hand. A class swap is calling a pre-set lighting scene. Changing a CSS variable is turning a dial on the master board that shifts every light at once.

Class-Based Styling

This is the approach to reach for first. You define how a state looks in CSS, then JavaScript simply flips the class on and off. Presentation stays in the stylesheet; behavior stays in the script.

const el = document.getElementById('panel');

el.classList.add('active');
el.classList.remove('disabled');
el.classList.toggle('expanded');            // add if absent, remove if present
el.classList.toggle('selected', isChosen);  // force to a boolean state
el.classList.replace('loading', 'loaded');
el.classList.contains('open');              // → true / false

A common real pattern is representing a button's lifecycle with mutually exclusive state classes:

function setButtonState(button, state) {
  // state is one of: 'idle' | 'loading' | 'success' | 'error'
  button.classList.remove('loading', 'success', 'error');
  button.disabled = state === 'loading';

  if (state === 'loading') { button.classList.add('loading'); button.textContent = 'Saving…'; }
  else if (state === 'success') { button.classList.add('success'); button.textContent = 'Saved!'; }
  else if (state === 'error')   { button.classList.add('error');   button.textContent = 'Retry'; }
  else { button.textContent = 'Save'; }
}

const saveBtn = document.getElementById('save');
saveBtn.addEventListener('click', async () => {
  setButtonState(saveBtn, 'loading');
  try {
    await fetch('/api/save', { method: 'POST' });
    setButtonState(saveBtn, 'success');
  } catch {
    setButtonState(saveBtn, 'error');
  }
});

Direct Style Manipulation

Sometimes a value only exists at runtime — a tooltip's left depends on where an element sits, a progress bar's width depends on a percentage. That's what the style property is for: it writes inline styles directly on the element.

const el = document.getElementById('box');

el.style.color = '#3498db';
el.style.backgroundColor = '#ecf0f1';   // camelCase: background-color → backgroundColor
el.style.padding = '10px 15px';
el.style.transform = `translateX(${offset}px)`;   // a value computed in JS

To set several properties in one shot, cssText writes them together (one update instead of several). Note it replaces all existing inline styles unless you append:

el.style.cssText = 'color:#fff; background:#3498db; padding:10px 15px;';
el.style.cssText += ' margin-top:20px;';   // append, keeping the above

Reading Computed Styles

The style property only sees inline styles — it's blind to anything coming from your stylesheets. To read what the browser has actually applied after all CSS rules cascade, use getComputedStyle:

const el = document.getElementById('box');

console.log(el.style.width);                       // '' — no inline width set
const computed = getComputedStyle(el);
console.log(computed.width);                       // e.g. '320px' (the real value)
console.log(computed.display);                     // e.g. 'block'

CSS Custom Properties

CSS custom properties (a.k.a. CSS variables) are the bridge between your stylesheet and your JavaScript. You declare them once, use them across many rules, and updating one value from JS re-styles everything that references it — no per-element loop required.

:root {
  --accent: #3498db;
  --space: 8px;
}
.button {
  background: var(--accent);
  padding: var(--space) calc(var(--space) * 2);
}

const root = document.documentElement;

// Read a variable (note the leading --, and trim the result):
const accent = getComputedStyle(root).getPropertyValue('--accent').trim();

// Set it at the document level — every rule using var(--accent) updates:
root.style.setProperty('--accent', '#e74c3c');

// Or scope a variable to one subtree:
document.getElementById('sidebar').style.setProperty('--space', '12px');

This is exactly how a color-customizer or font-size slider works — bind an input to a single variable:

const slider  = document.getElementById('font-size');
const display = document.getElementById('font-size-value');

slider.addEventListener('input', () => {
  document.documentElement.style.setProperty('--base-font-size', slider.value + 'px');
  display.textContent = slider.value + 'px';
  localStorage.setItem('fontSize', slider.value);   // remember the choice
});

Transitions via Classes

You rarely need to animate in JavaScript. Define the transition in CSS, then let JS toggle a class to trigger it — the browser handles the smooth interpolation, often with hardware acceleration.

.toast {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s ease, transform .3s ease;
}
.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

const toast = document.getElementById('toast');

function showToast() {
  toast.classList.add('visible');                 // CSS animates the change
  setTimeout(() => toast.classList.remove('visible'), 3000);
}

Hands-on Exercise

:root      { --bg: #ffffff; --fg: #1a1a1a; }
.dark-theme{ --bg: #12141c; --fg: #e8e8e8; }
body { background: var(--bg); color: var(--fg); transition: background .3s, color .3s; }

<button id="theme-btn" aria-pressed="false">🌙 Dark mode</button>

const btn = document.getElementById('theme-btn');

function applyTheme(isDark) {
  document.body.classList.toggle('dark-theme', isDark);
  btn.setAttribute('aria-pressed', String(isDark));
  btn.textContent = isDark ? '☀️ Light mode' : '🌙 Dark mode';
}

// On load: saved choice, else OS preference.
const saved = localStorage.getItem('theme');
const prefersDark = matchMedia('(prefers-color-scheme: dark)').matches;
applyTheme(saved ? saved === 'dark' : prefersDark);

btn.addEventListener('click', () => {
  const isDark = !document.body.classList.contains('dark-theme');
  applyTheme(isDark);
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — Element.classList
• MDN — Using CSS custom properties
• MDN — window.getComputedStyle()
• web.dev — Animations and performance

🚀 What's Next?

You can now build, change, and style elements. The missing piece is reacting to the user — clicks, keystrokes, submissions. That's the DOM Event Model and Types, where interactivity really begins.