Modifying Classes and Attributes

Changing text content is one way to update the page. The more powerful pattern is changing classes — your CSS already defines what an element looks like with and without certain classes, and JavaScript just switches the class on and off.

element.classList

classList is the API for reading and modifying an element’s CSS classes. It has five key methods:

.add()

Adds one or more classes:

const nav = document.querySelector('nav');
nav.classList.add('nav-open');
nav.classList.add('visible', 'animated');  // multiple at once

.remove()

Removes one or more classes:

nav.classList.remove('nav-open');
nav.classList.remove('visible', 'animated');

.toggle()

Adds the class if it is absent; removes it if it is present:

nav.classList.toggle('nav-open');  // open → closed → open → ...

This is the toggle pattern — the foundation of every show/hide, active-state, and open/close interaction you will build. One line, one call, handles both directions automatically.

.contains()

Returns true if the element has the class, false otherwise:

if (nav.classList.contains('nav-open')) {
  console.log('Nav is open');
}

.replace()

Replaces one class with another:

nav.classList.replace('nav-open', 'nav-closed');

element.className

The older approach reads or sets all classes as a single string:

nav.className = 'nav nav-open';  // replaces all existing classes

Avoid className for adding or removing individual classes — you risk accidentally replacing the entire class list. Use classList for targeted changes.

Reading and writing attributes

getAttribute and setAttribute work on any HTML attribute:

const img = document.querySelector('.tour-card img');
const src = img.getAttribute('src');
console.log(src);  // '/images/cascade-ridge.jpg'

img.setAttribute('alt', 'Hikers on Cascade Ridge trail');
img.removeAttribute('data-loading');

Use these for attributes that are not available as DOM properties, including custom data-* attributes.

data-* attributes

HTML data-* attributes store custom data on elements. JavaScript reads them through the dataset property:

<div class="tour-card" data-category="hiking" data-tour-id="cr-01">

const card = document.querySelector('.tour-card');
console.log(card.dataset.category);   // 'hiking'
console.log(card.dataset.tourId);     // 'cr-01' (kebab-case → camelCase)

The dataset property automatically converts data-tour-id to tourId (kebab-case to camelCase). You will use data-category to implement the tour filter in Module 07.

element.style

You can apply inline styles directly:

const banner = document.querySelector('.promo-banner');
banner.style.backgroundColor = '#2a6041';
banner.style.display = 'none';

Inline styles override CSS. For most interactivity, classList is preferred — your CSS defines the visual states, JavaScript switches between them. This keeps styling in CSS and logic in JavaScript where they belong.

Use element.style only when you need to set a style value that is computed at runtime — like a dynamic width or position.

Exercise

On the STO site in the Console:

// Toggle a class on the nav
const nav = document.querySelector('nav');
nav.classList.toggle('nav-open');  // add it
console.log(nav.classList.contains('nav-open'));  // true
nav.classList.toggle('nav-open');  // remove it
console.log(nav.classList.contains('nav-open'));  // false

// Read an image attribute
const img = document.querySelector('.tour-card img');
if (img) {
  console.log(img.getAttribute('src'));
  console.log(img.getAttribute('alt'));
}

// Add and read a data attribute
const card = document.querySelector('.tour-card');
if (card) {
  card.setAttribute('data-category', 'hiking');
  console.log(card.dataset.category);  // 'hiking'
}

Recap

• classList.add(), .remove(), .toggle(), .contains(), .replace() — use these instead of className for targeted class changes.
• The toggle pattern: classList.toggle('class-name') adds if absent, removes if present — one call handles both directions.
• getAttribute(name) and setAttribute(name, value) read and write any HTML attribute.
• data-* attributes store custom data; access them via element.dataset.propertyName (kebab-case becomes camelCase).
• element.style.property = value sets inline styles — prefer classList for state changes, reserve style for runtime-computed values.