DOM Recipes: Change colors/styles dynamically

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

Here’s how to dynamically change a web page’s colors using the CSS filter property and JavaScript:

<a href='javascript:document.querySelector("html").setAttribute("style","filter: saturate(60%) brightness(80%);")'>
  pastel
</a>

<a href='javascript:document.querySelector("html").setAttribute("style","filter: grayscale(100%); ")'>
  grayscale
</a>

<a href='javascript:document.querySelector("html").setAttribute("style","filter:  ")'>
  normal
</a>

Lessons in this unit:

0:	Introduction
1:	Hiding and showing elements
2:	Check if element is descendant
3:	▶︎ Change colors/styles dynamically
4:	DOM timing and when elements are ready
5:	stopPropagation vs preventDefault
6:	How to detect adblockers
7:	Creating exit intent popups