Question

我正在尝试更改HTML类技能和技能级别的CSS，我尝试了getElementsByClassName（'skill_level'）并注意到这会返回所有技能级元素的Object，但是我似乎无法改变元素的颜色。 IE浏览器。如何循环此对象并检查元素的宽度。

如果宽度为33％，我希望颜色为橙色，比66％橙色低33％以上。

.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>

Answer 1

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

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

如果百分比为＆gt;这将应用CSS类orange 33，或'red'如果大于66

进度条根据百分比宽度更改颜色

1 个答案: