JavaScript Curriculum
Styling via JavaScript
easyThe menu cards need hover effects, a dark mode toggle, loading states on the order button, and error states on the form. All of this is style-driven — JavaScript just adds and removes classes.
Styling via JavaScript
JavaScript has two ways to style elements: write inline styles directly via element.style, or toggle CSS classes. Knowing when to use each makes your code cleaner and your styles easier to maintain.
element.style — Direct Property Control
Click properties to see how they apply as inline styles:
// Click properties to apply them
classList.toggle — The Right Way to Style Dynamically
Toggle a CSS class and let your stylesheet do the visual work:
Toggle a class on the root element to switch the entire page theme via CSS variables.
.page { --bg: #fff; --text: #333; background: var(--bg); color: var(--text); }
.page.dark { --bg: #0d1117; --text: #c9d1d9; }const page = document.querySelector('.page')
btn.addEventListener('click', () => {
page.classList.toggle('dark')
})getComputedStyle — Reading the Final Result
element.style only shows inline styles you set. getComputedStyle shows the real final value after all CSS is applied:
A card div — display, padding, border-radius from your stylesheet.
const el = document.querySelector('div.card')
const styles = getComputedStyle(el)
// Read any property:
styles.getPropertyValue('font-size')
// → 'flex'Your Challenge
Wire a dark mode toggle button that calls document.body.classList.toggle('dark'). In your CSS, define body.dark with overridden colours. Then use getComputedStyle(document.body).getPropertyValue('background-color') to confirm the change in the console.
Challenge
Style the order button using both approaches: first set el.style.backgroundColor directly, then reset it and use classList.toggle('active') instead. Which feels cleaner? Then use getComputedStyle to read the button's final font-size.
Styling via JavaScript
easyThe menu cards need hover effects, a dark mode toggle, loading states on the order button, and error states on the form. All of this is style-driven — JavaScript just adds and removes classes.
Styling via JavaScript
JavaScript has two ways to style elements: write inline styles directly via element.style, or toggle CSS classes. Knowing when to use each makes your code cleaner and your styles easier to maintain.
element.style — Direct Property Control
Click properties to see how they apply as inline styles:
// Click properties to apply them
classList.toggle — The Right Way to Style Dynamically
Toggle a CSS class and let your stylesheet do the visual work:
Toggle a class on the root element to switch the entire page theme via CSS variables.
.page { --bg: #fff; --text: #333; background: var(--bg); color: var(--text); }
.page.dark { --bg: #0d1117; --text: #c9d1d9; }const page = document.querySelector('.page')
btn.addEventListener('click', () => {
page.classList.toggle('dark')
})getComputedStyle — Reading the Final Result
element.style only shows inline styles you set. getComputedStyle shows the real final value after all CSS is applied:
A card div — display, padding, border-radius from your stylesheet.
const el = document.querySelector('div.card')
const styles = getComputedStyle(el)
// Read any property:
styles.getPropertyValue('font-size')
// → 'flex'Your Challenge
Wire a dark mode toggle button that calls document.body.classList.toggle('dark'). In your CSS, define body.dark with overridden colours. Then use getComputedStyle(document.body).getPropertyValue('background-color') to confirm the change in the console.
Challenge
Style the order button using both approaches: first set el.style.backgroundColor directly, then reset it and use classList.toggle('active') instead. Which feels cleaner? Then use getComputedStyle to read the button's final font-size.