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的样式。