javascript - 根据 div 的宽度大小应用不同的颜色？

Question

我正在尝试根据 div 的宽度大小将不同的颜色应用到它。

我的html是这样的

<div class="container">
        <div class="progress"></div>
      </div>

我的 CSS 是这样的:

div._progress{
    background-color: black;
    width: 100%;
    height: 20px;
    padding: 1px;
  }
  div.progress{
    background-color: green;
    border-radius: 25%;
    width: 50%;
    height: 100%;
    -webkit-transition:width 350ms ease-in-out, height 350ms ease-in-out;
    -moz-transition:width 350ms ease-in-out, height 350ms ease-in-out;
    -o-transition:width 350ms ease-in-out, height 350ms ease-in-out;
    transition:width 350ms ease-in-out, height 350ms ease-in-out;
  }

在我的 javascript 中，我使用 document.getElementById 更改宽度大小......

例如，当内部栏是容器宽度的 90% 时，如何将进度的颜色更改为红色？

像这样

谢谢

Answer 1

您可以使用线性渐变属性。不需要在 js 中做。

#grad1 {
  height: 20px;
  background: linear-gradient(to left, #FF5733 30%, #36FF33 30%, #36FF33 100%);
}

<div id="grad1"></div>