❮ Previous Next ❯

DOM Styling & Classes

  • This lesson explains styling elements and manipulating classes in the DOM.

  • Introduction to DOM Styling & Classes

    In modern web development, JavaScript is not only used to control logic but also to:

    • Change styles dynamically

    • Respond to user actions

    • Add or remove CSS classes

    • Create interactive user interfaces

    In this lesson, we will learn how JavaScript interacts with:

    1. Events and Styling

    2. classList methods (add, remove, toggle)

    Events & Styling

    What is an Event ?

    An event is an action performed by the user or browser.

    Common events include:

    • Clicking a button

    • Hovering over an element

    • Typing in an input field

    • Loading a webpage

    • Scrolling the page

    JavaScript can listen to these events and respond by changing styles or behavior.

    Common JavaScript Events

    EventDescription
    clickUser clicks an element
    mouseoverMouse enters an element
    mouseoutMouse leaves an element
    keydownKey is pressed
    loadPage finishes loading

    Styling Elements Using JavaScript

    JavaScript can directly change CSS using the style property.

    Basic Syntax for Styling

    element.style.property = "value";

Change CSS Styles Using Events

Updates element styles dynamically when a user interacts with the page 

<!-- HTML -->
<button id="btn">Click Me</button>
<p id="text">Hello World</p>

<script>
// JavaScript
document.getElementById("btn").addEventListener("click", function () {
  document.getElementById("text").style.color = "red";
});
</script>

  • How This Works

    1. Button is selected using getElementById

    2. click event is attached

    3. When clicked, the text color changes

Apply Multiple Styles

Demonstrates how to set multiple CSS properties on an element 

let box = document.getElementById("box");

box.style.backgroundColor = "blue";
box.style.width = "200px";
box.style.height = "100px";

  • Important About style

    • JavaScript style overrides inline CSS

    • Property names use camelCase

      • background-color → backgroundColor

    • Best for small dynamic changes

    Limitations of Direct Styling

    • Code becomes lengthy

    • Hard to maintain

    • Not reusable

    • Breaks separation of concerns

    This is why class-based styling is preferred.

    classList (add, remove, toggle)

    What is classList ?

    classList is a built-in JavaScript property that allows you to:

    • Add CSS classes

    • Remove CSS classes

    • Toggle classes dynamically

    It provides a clean and powerful way to control styling.

    Why Use classList Instead of style ?

    styleclassList
    Inline stylingUses CSS classes
    Hard to maintainClean and reusable
    LimitedPowerful and scalable

  • classList.add()

    What it Does

    Adds one or more classes to an element.

Add CSS Class Using classList.add()

Applies predefined CSS styles to an element by adding a class 

<!-- CSS -->
<style>
.highlight {
  color: white;
  background-color: green;
  padding: 10px;
}
</style>

<!-- HTML -->
<p id="para">Hello World</p>

<script>
// JavaScript
let para = document.getElementById("para");
para.classList.add("highlight");
</script>

  • classList.remove()

    What it Does

    Removes a class from an element.

Remove CSS Class Using classList.remove()

Removes a specific class from an element to update its styling 

let para = document.getElementById("para");

para.classList.remove("highlight");

  • classList.toggle()

    What It Does

    • Adds the class if it does not exist

    • Removes the class if it already exists

Toggle CSS Class for Dynamic Styling

Adds or removes a class based on its current state using classList.toggle() 

<!-- CSS -->
<style>
.dark {
  background-color: black;
  color: white;
}
</style>

<!-- HTML -->
<button id="modeBtn">Toggle Mode</button>

<script>
// JavaScript
let btn = document.getElementById("modeBtn");

btn.addEventListener("click", function () {
  document.body.classList.toggle("dark");
});
</script>

  • How toggle() Works

    • First click → class added

    • Second click → class removed

    • Repeats on every click

Understanding toggle() and classList.contains()

Explains how toggle switches classes and how to check if a class exists 

// Toggle behavior (on each click)
let btn = document.getElementById("btn");

btn.addEventListener("click", function () {
  document.body.classList.toggle("dark");
});

// Check if class exists
let para = document.getElementById("para");

if (para.classList.contains("highlight")) {
  console.log("Class is present");
}
  • Event + classList

Toggle Visibility Using Events and classList

Uses click events to show or hide elements by toggling a CSS class 

<!-- CSS -->
<style>
.hide {
  display: none;
}
</style>

<!-- HTML -->
<button id="btn">Toggle Text</button>
<p id="text">Hello World</p>

<script>
// JavaScript
let btn = document.getElementById("btn");
let text = document.getElementById("text");

btn.addEventListener("click", function () {
  text.classList.toggle("hide");
});
</script>

  • Common Beginner Mistakes

    • Using style instead of classList

    • Forgetting CSS class definition

    • Typing wrong class names

    • Confusing toggle() behavior

    • Using inline styles excessively

    Best Practices for DOM Styling

    • Use classList for styling

    • Keep CSS in CSS files

    • Use JavaScript only to control logic

    • Write meaningful class names

    • Avoid inline styling when possible

    Use Cases

    • Dark mode toggle

    • Show/hide password

    • Form validation highlighting

    • Menu open/close

    • Animation triggers

❮ Previous Next ❯