时间戳

首页 > 解决方案 > 如何仅更改数字的最后一位数字颜色？

html - 如何仅更改数字的最后一位数字颜色？

问题描述

如您所知，数据将是可变的。所以，我想知道只有当最后有一个零或更多时，我才能改变一个数字的所有最后一位数字的颜色。 例如： 0.50 将是 0.5 0。10.00 = 1 0.00。10,000.00 = 1 0,000.00。100,050.00 = 100,05 0.00等等。谢谢，任何帮助将不胜感激。

.num{
  color: black;
  font-size: 22px;
  font-family: sans-serif;
}
<div class="num">0.50</div>
<div class="num">10.00</div>
<div class="num">10,000.00</div>
<div class="num">100,050.00</div>

标签： htmlcss

解决方案

您必须进行某种 DOM 操作来制作样式。您可以尝试以下方法：

var nums = document.querySelectorAll('.num');
nums.forEach(function(n){
  var s =  n.textContent.split(/[,.0]+$/);
  var m = n.textContent.match(/[,.0]+$/);
  if(s && m && s.length > 0 && m.length > 0){
    n.innerHTML = s[0] + '<span class=numStyle>'+m[0]+'</span>';
  }
});
.num{
  color: black;
  font-size: 22px;
  font-family: sans-serif;
}
.numStyle{
  font-weight: bold;
  opacity: 0.5;
  color: red;
}
<div class="num">1.5</div>
<div class="num">0.50</div>
<div class="num">10.00</div>
<div class="num">10,000.00</div>
<div class="num">100,050.00</div>

推荐阅读