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>