JavaScript DOM: A Beginner’s Guide to Changing Styles and Classes

A website is more than just content. The way it looks and reacts to user actions creates the real experience. In JavaScript, the Document Object Model (DOM) acts as the bridge between your HTML structure and the scripts that can change it. By learning how to manipulate styles and classes, you can make a page come alive; whether that’s switching between light and dark mode, highlighting active links, or animating elements on click.

This guide is designed for beginners who want a clear and practical introduction to changing styles and classes with JavaScript.

What you’ll learn

By the end, you’ll understand:

• How to select HTML elements before applying changes.
• How to use classList to add, remove, toggle, and replace classes.
• How to apply inline styles directly with JavaScript.
• How to update CSS variables (custom properties) for dynamic themes.
• Best practices to keep your code simple, accessible, and maintainable.

Selecting the element you want to style

Before you can change anything, you need to select it.

HTML Source Code:

<button id="toggleBtn">Toggle Theme</button>
<div class="card" id="feature">Hello World</div>

JavaScript Source Code:

const button = document.getElementById('toggleBtn');
const card = document.querySelector('#feature');

This gives JavaScript a “handle” to work with. Without selecting, you can’t style.

Changing classes with classList (the best way)

The easiest and most reliable way to style elements is by switching classes. This keeps all design rules inside your CSS.

Examples

card.classList.add('highlight');         // add a style
card.classList.remove('hidden');         // remove a style
card.classList.toggle('active');         // turn a class on/off
card.classList.replace('old', 'new');    // swap classes

Why use classes instead of inline styles?

• Styles remain in your CSS file, not scattered through JavaScript.
• Easier to maintain and debug.
• Works well with CSS animations and transitions.

Applying inline styles with .style

Sometimes, you need a one-off or dynamic style, such as setting a width based on user input. In those cases, use the style property.

card.style.backgroundColor = 'blue';
card.style.padding = '16px';
card.style.opacity = '0.8';

Or apply multiple at once:

card.style.cssText = 'color: white; background-color: navy; padding: 12px;';

Tip: Use inline styles sparingly. They override CSS rules, making styles harder to manage.

Updating CSS variables with JavaScript

CSS custom properties (variables) give you a powerful way to manage themes or color schemes.

CSS Source Code:

:root {
--bg: #ffffff;
--text: #111111;
}
body {
background: var(--bg);
color: var(--text);
}

JavaScript Source Code:

document.documentElement.style.setProperty('--bg', '#111111');
document.documentElement.style.setProperty('--text', '#eeeeee');

This changes the look everywhere those variables are used, perfect for theme switching.

Putting it all together (Theme toggle example)

Here’s a complete example using classList and CSS variables for a clean, beginner-friendly theme switcher.

HTML Source Code:

<button id="toggleBtn" aria-pressed="false">Switch to Dark</button>
<main class="content">Welcome to my page!</main>

CSS Source Code:

:root {
--bg: #ffffff;
--text: #111111;
}
body {
background: var(--bg);
color: var(--text);
transition: background 0.3s, color 0.3s;
}
.dark {
--bg: #111111;
--text: #eeeeee;
}

JavaScript Source Code:

const btn = document.getElementById('toggleBtn');
btn.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
const darkMode = document.documentElement.classList.contains('dark');
btn.setAttribute('aria-pressed', String(darkMode));
btn.textContent = darkMode ? 'Switch to Light' : 'Switch to Dark';
});

This simple script:

• Switches between dark and light themes.
• Uses a single .dark class for clean CSS.
• Updates the button text and accessibility attribute.

Best practices for beginners

• Use classes first. Reserve inline styles for calculated values.
• Keep CSS in your stylesheet. JavaScript should only tell CSS when to apply it.
• Think accessibility. Update ARIA attributes and button text when styles change.
• Avoid clutter. Don’t mix style logic everywhere; keep it organized.

Conclusion

Changing styles and classes with JavaScript is one of the first steps to making websites feel alive. You’ve learned how to select elements, use classList For clean class management, apply inline styles when needed, and even update CSS variables for theme control.

As you practice, focus on keeping your styles in CSS and using JavaScript to trigger them. This approach makes your projects easier to maintain, more accessible, and much more professional. With these skills, you can start building interactive, dynamic pages that respond beautifully to user actions.

You can reach out to me via LinkedIn