Modifying Attributes & Classes

1. Introduction

In order to build interactive user interfaces, you must be able to update element properties dynamically. JavaScript provides APIs to modify element attributes, class lists, inline styles, and custom data attributes.

2. Why It Matters

Managing styling changes by editing inline styles directly makes CSS difficult to maintain. Using the classList API is a cleaner approach because it lets you toggle CSS classes, keeping styling rules separated in your stylesheets.

3. Real-World Analogy

Think of a Smart Office Dashboard Display:

• Attribute (Physical Plaque specs): Changing the properties of a wall plaque, like its height, name, or serial number.
• classList (Status Indicators): Sliding indicator panels onto the plaque (e.g. adding a "Busy" or "Away" class). Instead of repainting the entire plaque, you simply swap status tags to change its appearance.
• dataset (Sticky Notes on the Back): Placing a sticky note with helper information on the back of the plaque ("Assigned to Alice"). The information is hidden from visitors but is easily readable by technicians.

4. Class & Attribute APIs

Let's explore the common methods for modifying elements:

1. Modifying Attributes:

• getAttribute(name): Returns the value of the specified attribute.
• setAttribute(name, value): Sets the value of the specified attribute.
• removeAttribute(name): Removes the specified attribute.

2. Modifying Classes (classList API):

• classList.add(className): Adds the specified class to the element.
• classList.remove(className): Removes the specified class from the element.
• classList.toggle(className): Toggles the class (adds it if missing, removes it if present).
• classList.contains(className): Returns true if the class is present on the element.

3. Custom Data Attributes (dataset):

HTML elements support custom attributes prefixed with data-. These attributes are exposed in JavaScript as a camelCase object via the dataset property.

5. Practical Example

This script demonstrates implementing a dark mode toggle button that updates both classes and custom data attributes:

6. Common Mistakes

• Modifying className directly: Overwriting the className property directly (e.g. element.className = 'active') replaces all existing classes. Use classList.add() or classList.remove() instead to keep other classes intact.
• Assuming dataset keys are lowercase: Custom data attributes are declared with hyphens in HTML (e.g. data-user-id) but are converted to camelCase in JavaScript (e.g. dataset.userId). Accessing them with lowercase keys (e.g. dataset.userid) returns undefined.

7. Quick Quiz

8. Scenario-Based Challenge

9. Debugging Exercise

<!-- HTML -->
<div id="product" data-product-price="25"></div>

// JavaScript
const prod = document.getElementById('product');
console.log(prod.dataset['product-price']); // logs undefined! Why?

console.log(prod.dataset.productPrice); // 25

10. Interview Questions

11. Production Considerations

• • Separate Styling Concerns: Avoid modifying inline style attributes directly (e.g. element.style.color = 'red'). Instead, define style rules in your CSS stylesheets and toggle classes on the elements using classList to keep styles separated from layout logic.