JavaScript: Styles and Classes

JavaScript allows you to dynamically modify CSS styles and classes of HTML elements. You can either directly change styles or add/remove CSS classes to control styling efficiently.

🔹 1. Changing Styles Directly (`element.style`)

The style property allows you to modify an element’s inline styles.

✔ Example: Changing background color and font size

document.getElementById("box").style.backgroundColor = "blue";
document.getElementById("box").style.fontSize = "20px";
document.getElementById("box").style.border = "2px solid red";

🚨 Limitations:

Only works with inline styles, not external stylesheets.
Does not override CSS classes unless explicitly applied.

🔹 2. Modifying Multiple Styles at Once

Instead of setting styles one by one, you can use Object.assign for better readability.

✔ Example: Setting multiple styles at once

Object.assign(document.getElementById("box").style, {
    backgroundColor: "yellow",
    fontSize: "18px",
    padding: "10px"
});

🔹 3. Working with CSS Classes (`classList`)

The classList property provides an easier way to manage CSS classes.

🔹 Adding and Removing Classes

✔ Example: Adding a class

document.getElementById("box").classList.add("highlight");

✔ Example: Removing a class

document.getElementById("box").classList.remove("highlight");

✔ Example: Toggle a class (Add if missing, remove if present)

document.getElementById("box").classList.toggle("active");

🔹 Checking if an Element Has a Class

✔ Example: Checking if an element contains a class

if (document.getElementById("box").classList.contains("highlight")) {
    console.log("Class exists!");
}

🔹 4. Reading Computed Styles (`getComputedStyle`)

The getComputedStyle method retrieves the actual computed styles (even from external CSS).

✔ Example: Getting the background color

let bgColor = getComputedStyle(document.getElementById("box")).backgroundColor;
console.log(bgColor);

🔹 5. Replacing Classes (`className` vs `classList`)

If you need to replace all classes, use className.

✔ Example: Overwriting all classes

document.getElementById("box").className = "newClass";

🚨 Warning: This removes all existing classes! Instead, use classList.add/remove for better control.

🔹 6. Adding CSS Rules Dynamically

You can create a new <style> tag and insert CSS rules dynamically.

✔ Example: Creating a new CSS rule

let style = document.createElement("style");
style.textContent = `
    .dynamicClass {
        color: white;
        background-color: black;
        padding: 10px;
    }
`;
document.head.appendChild(style);

document.getElementById("box").classList.add("dynamicClass");

📌 Summary

Method	Purpose
`element.style.property = "value"`	Modify inline styles
`Object.assign(element.style, {...})`	Set multiple styles at once
`element.classList.add("class")`	Add a class
`element.classList.remove("class")`	Remove a class
`element.classList.toggle("class")`	Toggle a class
`element.classList.contains("class")`	Check if an element has a class
`element.className = "newClass"`	Overwrite all classes
`getComputedStyle(element).property`	Get computed CSS property

🚀 Mastering styles and classes will make your JavaScript more dynamic and powerful! 🎯

Souy Soeng

JavaScript: Styles and Classes