JavaScript HTML DOM

JavaScript allows developers to interact with and modify the styles of HTML elements dynamically through the Document Object Model (DOM). By changing CSS properties via JavaScript, you can create dynamic, responsive, and interactive web experiences.

Methods for Changing CSS with JavaScript

1. Using the style Property

The style property allows you to modify inline CSS styles directly on an HTML element.

Example:

document.getElementById("myElement").style.color = "blue";
document.getElementById("myElement").style.fontSize = "20px";

This method is suitable for changing specific styles but not recommended for managing multiple or complex styles.

2. Using className

The className property replaces all existing classes of an element.

Example:

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

HTML:

<style>
    .newClass {
        color: red;
        font-weight: bold;
    }
</style>

Limitation: This overwrites any existing classes on the element.

3. Using classList

The classList property provides a more flexible way to work with CSS classes, allowing you to add, remove, or toggle classes without affecting other classes.

Example:

const element = document.getElementById("myElement");

// Add a class
element.classList.add("highlight");

// Remove a class
element.classList.remove("highlight");

// Toggle a class
element.classList.toggle("highlight");

Examples: Changing CSS Dynamically

Example 1: Change Background Color on Click

<div id="box" style="width:100px; height:100px; background-color:gray;"></div>
<button onclick="changeColor()">Change Color</button>

<script>
    function changeColor() {
        document.getElementById("box").style.backgroundColor = "blue";
    }
</script>

Example 2: Toggle Dark Mode

<button onclick="toggleDarkMode()">Toggle Dark Mode</button>

<script>
    function toggleDarkMode() {
        document.body.classList.toggle("dark-mode");
    }
</script>

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

Example 3: Apply Multiple Styles

const element = document.getElementById("myElement");
element.style.cssText = "color: green; font-size: 18px; margin: 10px;";

Best Practices for Changing CSS with JavaScript

  • Separate Styles from Logic
    Minimize inline styling with style and prefer adding/removing CSS classes for maintainability.
  • Use classList Over className
    The classList property is more flexible and preserves existing classes.
  • Avoid Hardcoding Styles in JavaScript
    Define styles in CSS files or <style> tags, and use JavaScript to toggle classes.
  • Cache DOM Elements
    Accessing DOM elements repeatedly can impact performance. Cache them for better efficiency: 
const element = document.getElementById("myElement");
element.style.color = "red";

Use Cases for Changing CSS Dynamically

  • Interactive Components: Highlighting a button on hover or click.
  • Responsive Design: Adapting styles based on user input or screen size.
  • Theming: Enabling light/dark mode toggles.
  • Animations: Adding or removing CSS animation classes.

Conclusion

Changing CSS dynamically using JavaScript is a powerful way to create interactive and engaging web applications. By leveraging properties like style, className, and classList, you can manage CSS changes efficiently and maintain clean, organized code.

For more tips on JavaScript and web development, visit The Coding College.

Leave a Comment