Fly with code

Get wet inside ocean of code

0%

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