ProgressBar動態改變樣式的策略

有幾種常見的策略可以動態改變ProgressBar的樣式：

1. 使用CSS類名：在修改ProgressBar樣式時，可以為不同的狀態定義不同的CSS類名，然后通過JavaScript動態地為ProgressBar添加或移除這些類名來改變樣式。

<div class="progress-bar"></div>

<script>
  const progressBar = document.querySelector('.progress-bar');

  // 添加不同狀態的類名
  function setProgressStyle(style) {
    progressBar.className = 'progress-bar ' + style;
  }

  // 使用不同的樣式
  setProgressStyle('loading');
</script>

<style>
  .progress-bar {
    width: 100%;
    height: 10px;
    background-color: gray;
  }

  .progress-bar.loading {
    background-color: blue;
  }

  .progress-bar.complete {
    background-color: green;
  }
</style>

2. 使用內聯樣式：在JavaScript中直接修改ProgressBar的內聯樣式來改變樣式。

<div id="progress-bar" style="width: 0%; height: 10px; background-color: gray;"></div>

<script>
  const progressBar = document.getElementById('progress-bar');

  function setProgress(percent) {
    progressBar.style.width = percent + '%';

    if (percent < 50) {
      progressBar.style.backgroundColor = 'red';
    } else {
      progressBar.style.backgroundColor = 'green';
    }
  }

  // 動態改變進度
  setProgress(30);
</script>

3. 使用CSS變量：定義一些CSS變量，并在JavaScript中動態改變這些變量的值來控制ProgressBar的樣式。

<div id="progress-bar"></div>

<script>
  const progressBar = document.getElementById('progress-bar');

  function setProgress(percent) {
    progressBar.style.setProperty('--progress', percent + '%');
  }

  // 動態改變進度
  setProgress(70);
</script>

<style>
  #progress-bar {
    width: 100%;
    height: 10px;
    background-color: gray;
    --progress: 0%;
    background: linear-gradient(to right, green var(--progress), transparent var(--progress));
  }
</style>

以上是一些常見的策略，可以根據具體需求選擇適合的方法來動態改變ProgressBar的樣式。