JavaScript: DOM Styles

Last updated: 2026-10-13

After learning how to change page content and structure with JS, the next step is controlling styles—making elements change color, show/hide, or switch themes. CSS handles static styles, JS handles dynamic styles, and together they enable interactivity.

Related DOM Methods：element.style classList class

1. style Property

element.style corresponds to the HTML inline style (style="..."). It can only read/write inline styles—it cannot access rules defined in CSS files or <style> tags.

<div id="box">Hello Style</div>
<script>
const element = document.getElementById('box');
element.style.color = 'red';
element.style.fontSize = '20px';  // Note: CSS font-size → JS fontSize
</script>

▶ Example: Reading and Writing style Property

2. className and classList

Manipulating an element's class is the most common way to change styles with JS—you pre-define classes in CSS, then JS just adds or removes class names.

(1) className

className is a string, and assigning to it will overwrite all existing classes.

<div id="demo1" class="item">Element 1</div>
<div id="demo2" class="item">Element 2</div>
<script>
const el1 = document.getElementById('demo1');
el1.className = 'active';        // Overwrites, only 'active' remains

const el2 = document.getElementById('demo2');
el2.className += ' highlight';   // Appends, but primitive and error-prone

console.log('el1.className:', el1.className);
console.log('el2.className:', el2.className);
</script>

(2) classList

classList is a DOMTokenList object that provides methods for adding, removing, and toggling classes without affecting other classes.

▶ Example: Theme Switching

▶ Example: Show and Hide

3. getComputedStyle

element.style can only read inline styles. How do you read styles defined in CSS files or <style> tags? The answer is getComputedStyle.

<div id="box">Test Element</div>
<script>
const element = document.getElementById('box');
const style = window.getComputedStyle(element);
console.log(style.color);       // "rgb(0, 0, 0)"
console.log(style.fontSize);    // "16px"
</script>

▶ Example: Getting Computed Styles

4. cssText Batch Styling

If you need to set multiple inline styles on an element at once, writing style.xxx = ... line by line is verbose. cssText lets you write them all at once.

<div id="box">Batch Styling</div>
<script>
const element = document.getElementById('box');
element.style.cssText = 'color: red; font-size: 20px; padding: 10px;';
</script>

▶ Example: cssText Batch Styling

Related DOM Methods：element.style classList class

❓ FAQ

📖 Summary

• element.style only operates on inline styles; it cannot read rules from CSS files. Property names must use camelCase when writing.
• className assignment overwrites all classes. Using classList with add/remove/toggle is safer.
• getComputedStyle reads the element's final computed style; the return value is read-only.
• cssText batch-sets inline styles, but assignment replaces existing inline styles.

📝 Exercises

1. Basic: Create a page with 3 buttons (red/green/blue). When clicked, use style.backgroundColor to change the page background color.
2. Intermediate: Use classList.toggle to implement a "highlight" feature—click a paragraph to toggle a highlight class (yellow background), click again to remove it.
3. Challenge: Implement a simple "night mode"—toggle with a button, use getComputedStyle to read the current background color to determine the mode, and display "Current mode: Day/Night" on the page.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us