Можно ли изменить переменную css с помощью js setProperty со значением другой переменной js? - PullRequest
Новая
       17

Можно ли изменить переменную css с помощью js setProperty со значением другой переменной js?

0 голосов
/ 25 апреля 2019

У меня есть поле ввода, в котором пользователь должен ввести цвет текста, который он хочет отобразить позже. Мне было интересно, если есть способ изменить переменные CSS с помощью функции javascript setProperty, и вместо значения аргумент будет другой переменной javascript? например: 

elem.style.setProperty('--my-css-variable', anotherJsVariable);

1 Ответ

0 голосов
/ 25 апреля 2019

Да, как и у вас.

Это большая часть пользовательских свойств CSS. 

setTimeout(function() {
  const elem = document.getElementById("one");
  const anotherJsVariable = "yellow";
  elem.style.setProperty('--my-custom-property', anotherJsVariable);
}, 750);
#one {
  --my-custom-property: red;
  background-color: var(--my-custom-property);
}

#two {
  background-color: white;
}

#three {
  background-color: var(--my-custom-property);
}

div {
  display: inline-block;
  padding: 1em;
}
<div id="one">
  <div id="two">
    <div id="three">

    </div>
  </div>
</div>
...