我正在尝试根据 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% 时,如何将进度的颜色更改为红色?
像这样
谢谢
最佳答案
您可以使用线性渐变属性。不需要在 js 中做。
#grad1 {
height: 20px;
background: linear-gradient(to left, #FF5733 30%, #36FF33 30%, #36FF33 100%);
}
<div id="grad1"></div>
关于javascript - 根据 div 的宽度大小应用不同的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46346614/