Styling & Class Manipulation

JavaScript can manipulate a webpage's styling in two ways: modifying inline styles directly or updating element CSS classes.

1. Modifying Classes: The classList Object

The best practice for changing styles dynamically is to keep styling rules in your CSS files (or Tailwind classes) and toggle class names in JavaScript.

The element.classList API provides methods to manage classes:

• add(className): Adds a class.
• remove(className): Removes a class.
• toggle(className): Toggles a class (adds it if missing, removes it if present).
• contains(className): Returns true if the element has the class.

const banner = document.querySelector('.alert-banner');

// 1. Add and Remove
banner.classList.add('visible');
banner.classList.remove('hidden');

// 2. Toggle (e.g. Dark Mode)
const themeBtn = document.querySelector('#theme-toggle');
themeBtn.addEventListener('click', () => {
  document.body.classList.toggle('dark-theme');
});

// 3. Inspect
if (banner.classList.contains('visible')) {
  console.log("Banner is visible!");
}

2. Modifying Inline Styles: The style Object

You can write styles directly to an element's style attribute.

Property names in CSS that contain hyphens (e.g. background-color, font-size) are converted to camelCase in JavaScript:

const box = document.querySelector('.box');

// CSS: background-color -> JS: backgroundColor
box.style.backgroundColor = "royalblue";

// CSS: font-size -> JS: fontSize (Remember to include units!)
box.style.fontSize = "24px";

// CSS: display -> JS: display
box.style.display = "flex";

Removing Inline Styles

To remove a style set by JavaScript and let the default stylesheet take over, assign it to an empty string:

box.style.display = ""; // Removes the inline display style

3. Manipulating CSS Variables (Custom Properties)

Modern web applications make heavy use of CSS variables (e.g. --primary-color). You can read or overwrite these variables dynamically in JavaScript:

/* global.css */
:root {
  --theme-color: #3b82f6;
}

// Write CSS Variable (updates it for the entire document)
document.documentElement.style.setProperty('--theme-color', '#ef4444');

// Read CSS Variable
const style = getComputedStyle(document.documentElement);
const currentTheme = style.getPropertyValue('--theme-color').trim();
console.log(currentTheme); // "#ef4444"

4. Performance: Classes vs. Inline Styles

Whenever you modify styles, the browser might perform a Reflow (recalculating the layout positions) and a Repaint (drawing pixels on screen).

• Classes (Recommended): Grouping style changes inside a CSS class causes only one reflow/repaint cycle when toggled.
• Inline Styles: Changing 10 style properties in a row using style.color, style.margin, etc. can cause multiple costly reflow cycles.

Rule of thumb: Write CSS rules in stylesheets and use JS classes to trigger them.

In the next module, we will explore asynchronous JavaScript, Promises, and the Fetch API.