基于innerHTML值的颜色

Question

我是web开发新手，需要帮助。如何根据值改变颜色?

<mat-accordion fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="20px" >
<mat-expansion-panel class="mat-elevation-z3" *ngFor="let resultSkill of ReportData; let l=index" >
<mat-expansion-panel-header class="description"  [attr.data-target]="'#happy'+l" >
<mat-panel-title>
{{resultSkill.ip_title}}
</mat-panel-title>
<span class="button-align2" [innerHTML]="resultSkill.range1"></span>
</mat-expansion-panel-header>
<mat-panel-description id="happy{{l}}" class="collapse">
</mat-panel-description>
<p class="collapse-message"  [innerHTML]="resultSkill.text" style="font-size: 14px;"></p>
<p class="collapse-message" [innerHTML]="resultSkill.result" style="font-size: 14px;"></p>
<p class="collapse-message" style="text-align: center; color: #006fd2"><b>How to overcome this?</b></p>
<p class="collapse-message" [innerHTML]="resultSkill.tips" style="font-size: 14px;"></p>
<hr class="style5">
</mat-expansion-panel>
<br/>
</mat-accordion>
CSS:
.button-align2{
float: right;
margin-right: 0;
font-size: 16px;
}

快照的样子

Answer 1

你需要一个简单的JS脚本在里面。查看下面的代码片段或https://codepen.io/ma-henderson/pen/OJRGEqq

const low_color = 'red';
const mid_color = 'yellow';
const high_color = 'green';

const buttons = document.querySelectorAll(".button2")
for (let i = 0; i < buttons.length; i++) {
if (buttons[i].dataset.skill == 'range1') {
buttons[i].style.backgroundColor = high_color;
} else if (buttons[i].dataset.skill == 'range2') {
buttons[i].style.backgroundColor = mid_color;
} else {
buttons[i].style.backgroundColor = low_color;
}
}

.button2{
margin-right: 0;
font-size: 16px;
display: inline-block;
width: 100px;
text-align: center;
}

<span class="button2" data-skill="range2">Some Text</span>

Answer 2

您可以使用纯CSS并转义选择器中的括号，并使用第n -child指定更改背景颜色的元素。

[[innerHTML]='resultSkill.range1']:nth-child(1) {
background: red;
}
[[innerHTML]='resultSkill.range1']:nth-child(2) {
background: orange;
}

<span class="button-align2" [innerHTML]="resultSkill.range1">red</span>
<span class="button-align2" [innerHTML]="resultSkill.range1">orange</span>