var в style.setProperty не отображает - PullRequest
Новая
       47

var в style.setProperty не отображает

0 голосов
/ 05 августа 2020

У меня есть индикатор выполнения, который увеличивается в зависимости от числа, введенного пользователем: 

<div class="progressBarContainer percentBar"> 
    <div class="progressBarPercent" style="--width:${gPercent}"  id="${gName}-pbar"></div> 
</div>

Я использую переменную в стиле, чтобы определить ширину индикатора выполнения 

.progressBarPercent {
  background-color: var(--progressbar-main-color);
  width: calc(var(--width, 0) * 1%); <== THIS
  min-width: 10px;
  max-width: calc(100% - 1px);
  height: 17px;
  border-radius: 15px;
}

Вот как я пытаюсь его обновить: 

document.getElementById(gName+"-pbar").style.setProperty('--width', calculatedPercent);

Если я веду журнал, новый процент отображается в журнале правильно, но свойство элемента не изменяется:

Элемент: Изображение элемента

Журнал: Изображение журнала

1 Ответ

1 голос
/ 05 августа 2020

Код, который вы опубликовали, похоже, работает нормально, проблема должна быть в другом.

Вот рабочий пример: 

let progress = 0;

setInterval(() => {
  if (++progress > 100) progress = 0;
  document.getElementById("test").style.setProperty('--width', progress);
}, 100);
:root {
  --progressbar-main-color: crimson;
}

.progressBarContainer {
  width: 100%;
  background-color: darkgray;
}

.progressBarPercent {
  background-color: var(--progressbar-main-color);
  width: calc(var(--width, 0) * 1%);
  min-width: 10px;
  max-width: calc(100% - 1px);
  height: 17px;
  border-radius: 15px;
}
<div class="progressBarContainer percentBar">
  <div class="progressBarPercent" style="--width:0" id="test"></div>
</div>
...