Phase 10 — DOM (Very Important)

Module 36 — Styling DOM Elements

JavaScript can dynamically change the appearance of HTML elements by modifying CSS properties, CSS classes, and CSS custom properties (variables). This allows developers to create interactive user interfaces without reloading the page.

DOM styling is commonly used in:

• Dark Mode
• Theme Switchers
• Navigation Menus
• Animations
• Form Validation
• Image Galleries
• Dashboards
• Modal Windows

Overview

style

The style property allows you to change an element's inline CSS.

HTML

htmlCopy
1<div id="box">
2    JavaScript
3</div>

JavaScript

javascriptCopy
1const box = document.getElementById("box");
2
3box.style.backgroundColor = "royalblue";
4box.style.color = "white";
5box.style.padding = "20px";
6box.style.borderRadius = "8px";

Result

htmlCopy
1<div id="box" style="background-color:royalblue;color:white;padding:20px;border-radius:8px;">
2    JavaScript
3</div>

Changing Multiple Styles

javascriptCopy
1box.style.width = "300px";
2box.style.height = "150px";
3box.style.fontSize = "24px";
4box.style.textAlign = "center";

Reading Styles

javascriptCopy
1console.log(box.style.backgroundColor);

style only returns inline styles applied directly to the element.

getComputedStyle()

Returns the final computed styles after applying:

• External CSS
• Internal CSS
• Inline CSS
• Browser default styles

CSS

cssCopy
1.box{
2    color:white;
3    background:black;
4    padding:20px;
5}

HTML

htmlCopy
1<div class="box">
2    Hello
3</div>

JavaScript

javascriptCopy
1const box = document.querySelector(".box");
2
3const styles = getComputedStyle(box);
4
5console.log(styles.backgroundColor);
6
7console.log(styles.padding);

CSS Variables

CSS Variables (Custom Properties) make themes and reusable styling much easier.

CSS

cssCopy
1:root{
2
3    --primary-color:#2563eb;
4
5    --font-size:18px;
6
7}

JavaScript

Update a variable

javascriptCopy
1document.documentElement.style.setProperty(
2
3"--primary-color",
4
5"tomato"
6
7);

Read a variable

javascriptCopy
1const color = getComputedStyle(
2
3document.documentElement
4
5).getPropertyValue(
6
7"--primary-color"
8
9);
10
11console.log(color);

className

className gets or replaces the entire class attribute.

HTML

htmlCopy
1<div class="card"></div>

JavaScript

javascriptCopy
1const card = document.querySelector(".card");
2
3console.log(card.className);

Output

textCopy
1card

Replace classes

javascriptCopy
1card.className = "card active shadow";

classList

classList provides a safer way to manage individual CSS classes.

javascriptCopy
1card.classList.add("active");
2
3card.classList.remove("shadow");
4
5card.classList.toggle("dark");
6
7card.classList.contains("active");

className vs classList

Practical Example

HTML

htmlCopy
1<button id="btn">
2
3Change Style
4
5</button>
6
7<div id="box">
8
9JavaScript
10
11</div>

JavaScript

javascriptCopy
1const button = document.getElementById("btn");
2
3const box = document.getElementById("box");
4
5button.addEventListener("click", () => {
6
7    box.style.backgroundColor = "green";
8
9    box.style.color = "white";
10
11    box.style.padding = "20px";
12
13});

Real-World Example — Theme Switcher

CSS

cssCopy
1:root{
2
3    --background:white;
4
5    --text:black;
6
7}
8
9body{
10
11    background:var(--background);
12
13    color:var(--text);
14
15}

JavaScript

javascriptCopy
1document.getElementById("theme")
2
3.addEventListener("click", () => {
4
5    document.documentElement.style.setProperty(
6
7        "--background",
8
9        "#1f2937"
10
11    );
12
13    document.documentElement.style.setProperty(
14
15        "--text",
16
17        "white"
18
19    );
20
21});

Mini Project — Color Changer

HTML

htmlCopy
1<button id="red">
2
3Red
4
5</button>
6
7<button id="blue">
8
9Blue
10
11</button>
12
13<div id="box">
14
15Color Box
16
17</div>

JavaScript

javascriptCopy
1const box = document.getElementById("box");
2
3document.getElementById("red")
4
5.addEventListener("click", () => {
6
7    box.style.backgroundColor = "red";
8
9});
10
11document.getElementById("blue")
12
13.addEventListener("click", () => {
14
15    box.style.backgroundColor = "blue";
16
17});

Common Mistakes

Using CSS Property Names Incorrectly

❌ Wrong

javascriptCopy
1box.style.background-color = "red";

✅ Correct

javascriptCopy
1box.style.backgroundColor = "red";

JavaScript uses camelCase for CSS property names.

Expecting style to Read External CSS

javascriptCopy
1console.log(box.style.color);

If the color is defined in a stylesheet, this may return an empty string.

Use:

javascriptCopy
1const styles = getComputedStyle(box);
2
3console.log(styles.color);

Overwriting Existing Classes

❌ Wrong

javascriptCopy
1card.className = "active";

This removes all previous classes.

✅ Better

javascriptCopy
1card.classList.add("active");

Best Practices

• Use classList instead of className for most class manipulation.
• Use CSS classes for reusable styles and style only for dynamic values.
• Read computed styles with getComputedStyle() when working with external stylesheets.
• Use CSS variables for themes and design systems.
• Keep presentation logic in CSS and behavior in JavaScript.

Interview Questions

Q1. What is the difference between style and getComputedStyle()?

• style accesses only inline styles.
• getComputedStyle() returns the final computed style after applying all CSS rules.

Q2. When should you use CSS variables?

Use CSS variables for themes, reusable colors, spacing, typography, and values that may change dynamically.

Q3. What is the difference between className and classList?

• className replaces or reads the entire class string.
• classList provides methods to safely manage individual classes.

Q4. Why are CSS property names written in camelCase in JavaScript?

JavaScript object properties cannot contain hyphens, so CSS properties such as background-color become backgroundColor.

Summary

In this module, you learned how to style DOM elements using JavaScript. You explored the style property for inline styling, getComputedStyle() for reading computed CSS values, CSS variables for dynamic theming, and className and classList for managing CSS classes. These techniques are essential for building responsive, interactive, and modern web applications.

Next Module: Module 37 — DOM Events, where you'll learn addEventListener(), mouse events, keyboard events, form events, event bubbling, capturing, delegation, and building highly interactive user interfaces.