代码之家 › 专栏 › 技术社区 › oudekaas

基于百分比宽度更改颜色的进度条

colors angular css

1

oudekaas · 技术社区 · 7 年前

我正在尝试更改HTML类技能和技能级别的css, 我尝试了getElementsByClassName('skill\u level'),注意到这会返回所有技能级别元素的对象,但是我似乎无法更改元素的颜色。例如,如何在该对象上循环并检查元素的宽度。

例如,如果宽度为33%,我希望颜色为橙色,大于33%小于66%为橙色。

.skill {
    background: #262626;
    height: 20px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid red;
    padding: 0;
    margin: 0;
    border-radius: 2;
}

.skill_level {
  background-color: red;
  margin: 2px;
  box-sizing: border-box;
  height: 14px;
  text-align: center;
  padding: 0;
}

<div class="boxDetails">
 <p>Transparancy</p>
 <p>{{key.transparent}}/{{key.transparentTotal}}</p>
  <div class="skill" >
   <div class="skill_level" 
    [ngStyle]="{ 'width': key.transparentPercentage}">
    {{key.transparentPercentage}}
   </div>
  </div>
</div>

1 回复 | 直到 7 年前

1

2

user184994 7 年前

为什么不使用标准角度功能?

[ngClass]="{ 'orange': key.transparentPercentage > 33, 'red': key.tranparentPercentage > 66}"

这将应用CSS类 orange 如果百分比大于;33,如果大于66,则为“红色”