js操作css变量

原文：http://css-live.ru/articles/dostup-k-css-peremennym-i-ix-izmenenie-spomoshhyu-javascript.html

  :root {
    --footer-color: #2cba92;
    /* @reasonCode зеленый */
    --palatte-padding-left: 0px
  }

  footer {
    width: 50px;
    height: 50px;
    margin-top: 20px;
    margin-left: var(--palatte-padding-left);
    background-color: var(--footer-color);
    border-radius: 15px;
  }

  const footer = document.querySelector('footer')
  const inputs = [].slice.call(document.querySelectorAll('input'));

  inputs.forEach(input => input.addEventListener('change', handleUpdate));
  inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

  function handleUpdate(e) {
    if (this.type === 'color') {
      footer.style.setProperty('--footer-color', this.value)
    } else {
      footer.style.setProperty('--palatte-padding-left', this.value + 'px')
    }
  }

  <body style="padding: 20px">
    <label>Выберите свой любимый цвет:</label>
    <input type="color" value="#2cba92">
    <br/>
    <label>Настройте отступ:</label>
    <input type="range" id="margin" min="10" max="200" value="0">
    <footer></footer>
  </body>