JS30 03 - CSS Variables

Process Flow

HTML

• Application of type='range' and type='color'
• Set up of data-* attribute

CSS

• Application of CSS variable
• Set up global variable inside :root
• Use var(variable) to apply CSS variable

JavaScript

• For picking color, we can attach change event
• For scrolling the wheel, we can attach mousemove event.
• Solution 1
  • Use switch to bind DOM respectively
  • Use style.property to change CSS style one by one
• Solution 2
  • Use setProperty() and Logical operators