DOM Recipes: Change colors/styles dynamically

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

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