How It Works 1. HTML

displays the text Hello It starts with class red A button is used to trigger the color change 2. CSS .red → sets text color to red .blue → sets text color to blue 3. JavaScript getElementById(\"title\") selects the

classList.toggle() switches classes: removes current color adds the other color Output Behavior Initially → 🔴 Red Click button → 🔵 Blue Click again → 🔴 Red Conclusion This is a simple example of: DOM manipula","image":"https://media2.dev.to/dynamic/image/width=1200,height=627,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmp5mgubrmmdefb8ncpdx.png","datePublished":"2026-03-25T14:46:41","author":{"@type":"Person","name":"Mohana Kumar"},"publisher":{"@type":"Organization","name":"Dev.to JavaScript"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://flarestart.com/article/color-toggle-using-button-in-html-css-and-javascript-20260325"}}
Back to articles
How-ToWeb Development
🔴🔵 Color Toggle Using Button in HTML, CSS, and JavaScript
via Dev.to JavaScriptMohana Kumar3h ago
Introduction This program shows how to change the color of a heading ( <h1> ) between red and blue when a button is clicked using JavaScript. Code <!DOCTYPE html> <html> <head> <style> .red { color : red ; } .blue { color : blue ; } </style> </head> <body> <h1 id= "title" class= "red" > Hello </h1> <button onclick= "toggleColor()" > Change Color </button> <script> function toggleColor () { const el = document . getElementById ( " title " ); el . classList . toggle ( " red " ); el . classList . toggle ( " blue " ); } </script> </body> </html> How It Works 1. HTML <h1> displays the text Hello It starts with class red A button is used to trigger the color change 2. CSS .red → sets text color to red .blue → sets text color to blue 3. JavaScript getElementById("title") selects the <h1> classList.toggle() switches classes: removes current color adds the other color Output Behavior Initially → 🔴 Red Click button → 🔵 Blue Click again → 🔴 Red Conclusion This is a simple example of: DOM manipula
Continue reading on Dev.to JavaScript
Opens in a new tab
Read Full Article
0 views
Related Articles
How-To
Save $100 On Our Favorite Soundbar and Subwoofer Combo
Wired • 30m ago
How-To
Sony's new theater system lets you upgrade your TV setup gradually - how it works
ZDNet • 1h ago
How-To
How to delete your personal info from the internet (while saving money)
ZDNet • 2h ago
How-To
Here Is What Programming Taught Me About Growth
Medium Programming • 3h ago
How-To
I Did Everything “Right” in Programming — Here Is What Actually Mattered
Medium Programming • 3h ago
Discover More Articles