javascript如何根据值的变化更改字形图标
javascript如何根据值的变化更改字形图标
提问于 2018-09-23 20:50:38
我正在尝试做一个最佳级别功能，当一个值在最佳范围内较高时，将显示一个向上箭头的图示符，当该值较低时，它将变为向下箭头的图示符。
<div class="card-body" ng-repeat="item in resTemperature" ng-if="$last">
<p>
Temperature  <span class="text" style="font-weight: bold; font-size:150%" ng-repeat="i in item">{{i}} °C </span>
<span class="glyphicon" style="font-size: 200%; float: right;"></span>
</p>
</div>具有硬编码值的示例结果：
回答 1
Stack Overflow用户
发布于 2018-09-23 21:05:13
我会用下面的方法来处理。在您的div中添加一个额外的类，指示您的值是更高/更低还是最优。然后去掉你的字形图标跨度，用一个css伪元素代替它。即，
<style>
.card-body .text::after {
font-size: 200%;
float: right;
}
.card-body.optimal .text::after {
content: "O"; /* replacing these with the glyphs you want */
}
.card-body.lower .text::after {
content: "L";
}
.card-body.higher .text::after {
content: "H";
}
</style>
<div class="card-body optimal" ng-repeat="item in resTemperature" ng-if="$last">
<p>Temperature  
<span class="text" style="font-weight: bold; font-size:150%" ng-repeat="i in item">{{i}} °C </span>
</p>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52466250
复制相关文章
相似问题