--- title: "CSS Manipulation with JavaScript - classList, getComputedStyle, Dark Mode, Animations | Modern Age Coders" description: "Learn to manipulate CSS with JavaScript. Master element.style, classList, getComputedStyle, CSS custom properties, dark mode toggle, scroll effects, theme switcher, and CSS transitions triggered by JS. 58+ practice questions." slug: css-manipulation-with-javascript canonical: https://learn.modernagecoders.com/resources/javascript/css-manipulation-with-javascript/ category: "JavaScript" keywords: ["javascript css manipulation", "classList javascript", "getComputedStyle javascript", "dark mode javascript", "css variables javascript", "toggle class javascript", "scroll effect javascript", "theme switcher javascript", "css transitions javascript", "javascript animations"] --- # CSS Manipulation with JavaScript **Difficulty:** Intermediate **Reading time:** 40 min **Chapter:** 15 **Practice questions:** 58 ## What Is CSS Manipulation with JavaScript? CSS Manipulation means using JavaScript to dynamically change the appearance of elements -- colors, sizes, visibility, positions, animations -- in response to user actions or application state. You have already used `element.style` and `classList` in previous chapters. This chapter goes deeper into all the techniques for controlling CSS from JavaScript. There are three main approaches: 1. **Inline styles** (`element.style.property`) -- directly set CSS on an element 2. **CSS classes** (`element.classList`) -- toggle predefined CSS classes 3. **CSS custom properties** (`setProperty`) -- change CSS variables from JS ``` // Approach 1: Inline style element.style.backgroundColor = "red"; // Approach 2: Toggle a class element.classList.toggle("active"); // Approach 3: CSS variable document.documentElement.style.setProperty("--primary-color", "#a855f7"); ``` ## Why Learn CSS Manipulation? ### 1. Every Modern Feature Uses It Dark mode, animated menus, scroll-to-top buttons, progress bars, loading spinners, tooltip popups, modal animations -- all of these change CSS dynamically with JavaScript. This is the skill that turns a static page into a polished, professional web app. ### 2. Performance Matters Changing styles the wrong way causes the browser to recalculate layouts, which makes pages sluggish. Knowing the difference between toggling classes (fast) and setting inline styles in a loop (slow) makes you a better developer. ### 3. CSS Variables + JS = Powerful Theming CSS custom properties (variables) let you define colors, sizes, and spacings once and change them everywhere by updating a single variable from JavaScript. This is how theme switchers work -- change one variable and the entire site updates. ### 4. It Is the Foundation for Animations CSS transitions and animations are triggered by class changes. JavaScript adds or removes a class, and CSS handles the smooth animation. This separation of concerns (JS handles logic, CSS handles visuals) is a professional best practice. ## Detailed Explanation ### 1. element.style (Inline Styles) Sets styles directly on the element's `style` attribute. Useful for dynamic values that cannot be predefined in CSS: ``` const box = document.getElementById("box"); // Set styles (CSS uses kebab-case, JS uses camelCase) box.style.width = "200px"; box.style.height = "200px"; box.style.backgroundColor = "#a855f7"; // background-color box.style.borderRadius = "12px"; // border-radius box.style.boxShadow = "0 4px 6px rgba(0,0,0,0.1)"; // box-shadow // Read a style (only reads inline styles, not stylesheet styles) console.log(box.style.width); // "200px" console.log(box.style.backgroundColor); // "#a855f7" // Remove an inline style box.style.backgroundColor = ""; // Removes the inline style // Set multiple styles at once box.style.cssText = "width:100px; height:100px; background:red;"; // Warning: cssText REPLACES all existing inline styles ``` ### 2. element.classList (CSS Classes) The preferred way to manage styles. Define styles in CSS, toggle classes in JS: ``` .hidden { display: none; } .visible { display: block; } .highlight { background-color: yellow; font-weight: bold; } .fade-in { opacity: 1; transition: opacity 0.5s; } .fade-out { opacity: 0; transition: opacity 0.5s; } const el = document.getElementById("element"); el.classList.add("highlight"); // Add a class el.classList.remove("highlight"); // Remove a class el.classList.toggle("hidden"); // Add if missing, remove if present el.classList.contains("highlight"); // Check: returns true/false el.classList.replace("old", "new"); // Replace one class with another // Why classList is better than inline styles: // 1. Styles are defined in CSS (separation of concerns) // 2. Easier to manage (toggle one class vs set 10 properties) // 3. CSS handles animations/transitions automatically // 4. Easier to debug (inspect classes in DevTools) ``` ### 3. getComputedStyle() `element.style` only reads inline styles. `getComputedStyle()` reads the actual, final computed value from all sources (stylesheets, inherited styles, defaults): ``` #box { width: 200px; background-color: blue; padding: 20px; } Hello const box = document.getElementById("box"); // element.style reads ONLY inline styles console.log(box.style.width); // "" (empty -- not inline) console.log(box.style.backgroundColor); // "" (empty -- not inline) // getComputedStyle reads the ACTUAL applied styles const computed = getComputedStyle(box); console.log(computed.width); // "200px" console.log(computed.backgroundColor); // "rgb(0, 0, 255)" console.log(computed.padding); // "20px" console.log(computed.fontSize); // "16px" (browser default) ``` Note: computed values are always in resolved units (px, rgb) even if you defined them in em, %, or hex. ### 4. CSS Custom Properties (Variables) with JavaScript CSS variables let you define reusable values. JavaScript can read and change them: ``` :root { --primary: #a855f7; --bg: #ffffff; --text: #1a1a2e; } body { background-color: var(--bg); color: var(--text); } .btn { background-color: var(--primary); color: white; } const root = document.documentElement; // The element // Read a CSS variable const primary = getComputedStyle(root).getPropertyValue("--primary"); console.log(primary); // "#a855f7" // Change a CSS variable (updates everywhere it is used!) root.style.setProperty("--primary", "#06b6d4"); root.style.setProperty("--bg", "#1a1a2e"); root.style.setProperty("--text", "#f1f5f9"); // The entire page updates because all elements reference these variables ``` This is incredibly powerful. Change one variable and every element using it updates automatically. This is how professional theme switchers work. ### 5. CSS Transitions Triggered by JavaScript Define a transition in CSS. JavaScript triggers it by adding/removing a class: ``` .box { width: 100px; height: 100px; background: #a855f7; transition: all 0.5s ease; } .box.expanded { width: 300px; height: 200px; background: #06b6d4; border-radius: 20px; } Toggle document.getElementById("btn").addEventListener("click", function() { document.getElementById("box").classList.toggle("expanded"); }); // The CSS transition handles the smooth animation automatically ``` ### 6. Reading Scroll Position `window.scrollY` gives the vertical scroll position. Use it to add classes based on scroll: ``` window.addEventListener("scroll", function() { const nav = document.getElementById("nav"); if (window.scrollY > 100) { nav.classList.add("scrolled"); } else { nav.classList.remove("scrolled"); } }); ``` ## Code Examples ### Dark Mode Toggle with CSS Variables ```html

My Dashboard

Welcome, Aarav!

You have 5 new assignments and 2 messages.

Upcoming Test

Mathematics - Chapter 12 - April 15, 2026

``` CSS variables are defined on `:root`. All elements reference these variables. When the button is clicked, JavaScript changes the variables using `setProperty`, and every element updates instantly. The CSS `transition` makes the color change smooth. **Output:** ``` A dashboard page with cards. Clicking the button switches between light and dark mode with smooth transitions. ``` ### Multi-Theme Switcher ```html

Theme Switcher

Choose a theme:

Sample Card

This card uses the primary color as background.

``` Six theme presets are defined as objects. Clicking a colored dot changes all four CSS variables at once, instantly updating the entire page. The transition on body makes the switch smooth. The selected dot gets a border to show the active theme. **Output:** ``` A page with 6 colored dots. Clicking any dot changes the entire color scheme (background, text, buttons, cards). ``` ### Scroll-Based Navigation Effects ```html

Section 1

Scroll down to see the navigation change, progress bar fill, and scroll-to-top button appear.

Section 2

The navigation shrinks and gets a white background when you scroll past 100px.

Section 3

The progress bar at the top shows how far you have scrolled through the page.

Section 4

The scroll-to-top button appears after scrolling 300px down.

Section 5

All of these effects use CSS classes toggled by JavaScript scroll events.

``` Three scroll-based effects: (1) Navigation shrinks and gets a background after 100px scroll. (2) A progress bar shows scroll percentage using `window.scrollY` and `document.documentElement.scrollHeight`. (3) A scroll-to-top button appears after 300px. All use classList for toggling and element.style for the progress width. **Output:** ``` A page with a navbar that shrinks on scroll, a progress bar at the top, and a scroll-to-top button that fades in. ``` ### Animated Navigation Menu ```html

Page Content

Click the Menu button to open the animated sidebar navigation.

``` The sidebar starts off-screen (right: -300px). Adding the "open" class moves it on-screen (right: 0) with a CSS transition. The overlay fades in with opacity. Closing happens by removing both classes. The Escape key also closes the menu. All animation is handled by CSS transitions -- JavaScript only toggles classes. **Output:** ``` A page with a menu button. Clicking it slides in a sidebar from the right with a dark overlay. Click overlay or press Escape to close. ``` ### getComputedStyle and Reading CSS Values ```html
Styled Box
``` This demo shows the critical difference between `element.style` and `getComputedStyle()`. element.style only shows inline styles (most are empty because styles come from the stylesheet). getComputedStyle shows the actual computed values from all CSS sources, returned in resolved units (px, rgb). **Output:** ``` A styled box with buttons to read computed styles (shows all values), read inline styles (mostly empty), and add an inline border. ``` ### Progress Bar with JavaScript Control ```html

Progress Bar

0%
``` The progress bar's width is controlled by setting `fill.style.width`. The CSS transition makes width changes animate smoothly. The "Auto Fill" button uses `setInterval` to incrementally increase the progress. `Math.min` and `Math.max` keep the value between 0 and 100. **Output:** ``` A gradient progress bar with +10%, -10%, Reset, and Auto Fill buttons. The bar animates smoothly when changing. ``` ## Common Mistakes ### Using element.style to Read Stylesheet Styles **Wrong:** ``` // CSS: #box { background-color: blue; } const box = document.getElementById("box"); console.log(box.style.backgroundColor); // "" (empty!) ``` element.style only reads inline styles, not styles from stylesheets. It returns an empty string. **Correct:** ``` const box = document.getElementById("box"); const computed = getComputedStyle(box); console.log(computed.backgroundColor); // "rgb(0, 0, 255)" ``` `element.style` only reads inline styles (set via the style attribute or JS). Use `getComputedStyle(element)` to read the actual applied styles from all sources. ### Forgetting that CSS Variables Need the -- Prefix **Wrong:** ``` root.style.setProperty("primary", "#a855f7"); // Missing -- // Does not set a CSS variable ``` The property is set but not recognized as a CSS custom property. CSS variables must start with --. **Correct:** ``` root.style.setProperty("--primary", "#a855f7"); // Correct ``` CSS custom properties must always start with `--`. Without the prefix, it is just a regular (invalid) CSS property that has no effect. ### Animating Properties That Cannot Be Transitioned **Wrong:** ``` /* The transition does not work -- display is not animatable */ ``` The element appears/disappears instantly. The display property cannot be animated with CSS transitions. **Correct:** ``` ``` `display` is not animatable. Use `opacity` and `visibility` instead for fade effects. Alternatively, use `transform: scale(0)` to `scale(1)` for shrink/grow effects. ### Setting style.cssText Replaces All Inline Styles **Wrong:** ``` const el = document.getElementById("box"); el.style.color = "red"; el.style.fontSize = "20px"; el.style.cssText = "background: blue;"; // Destroys color and fontSize! ``` After setting cssText, only background: blue remains. The color and fontSize are gone. **Correct:** ``` // Option 1: Set individual properties el.style.backgroundColor = "blue"; // Option 2: Include all properties in cssText el.style.cssText = "color: red; font-size: 20px; background: blue;"; ``` `cssText` replaces the entire inline style. It does not append. Either set individual properties or include all desired properties in the cssText string. ## Summary - element.style.property sets inline CSS styles. Use camelCase: background-color becomes backgroundColor, font-size becomes fontSize. - element.style only reads INLINE styles. Use getComputedStyle(element) to read the actual applied styles from all CSS sources (stylesheets, inherited, defaults). - classList.add/remove/toggle/contains is the preferred way to manage styles. Define styles in CSS, toggle classes in JS. This keeps style logic in CSS and behavior logic in JS. - classList.replace('old', 'new') swaps one class for another in a single operation. - CSS custom properties (variables) are defined with -- prefix on :root. Change them with document.documentElement.style.setProperty('--name', 'value'). All elements using that variable update automatically. - Read CSS variables with getComputedStyle(root).getPropertyValue('--name'). - CSS transitions handle smooth animations. JavaScript just toggles classes; CSS handles the animation timing, easing, and duration. - window.scrollY gives the current vertical scroll position. Use the scroll event to add/remove classes based on scroll position (sticky navbars, scroll-to-top buttons, progress bars). - getComputedStyle returns values in resolved units: px for sizes, rgb() for colors, even if the original CSS used em, %, hex, or named colors. - style.cssText replaces ALL inline styles. Set individual properties when you want to preserve existing inline styles. ## Related Topics - undefined - undefined --- *Source: https://learn.modernagecoders.com/resources/javascript/css-manipulation-with-javascript/* *Practice questions: https://learn.modernagecoders.com/resources/javascript/css-manipulation-with-javascript/practice/*