Javascript 使用CSS舍入数字并以红色或绿色显示数字

我正在从数据库中获取一些数值。此值是一个长十进制值<代码>0.45345或

1.2423432

。我想把这个值四舍五入到小数点后两位，如果这个值是负数，我想用红色显示这个值，如果这个值是正数，我想用绿色显示它

---

有没有可能通过CSS获得想要的结果

由于仅使用CSS无法实现这一点，并且您使用Jquery标记问题，请尝试以下操作：

$（文档）.ready（函数（）{
$（'.round'）。每个（函数（）{
var number=parseFloat（$（this.html（）），
四舍五入=固定数量（2）；
$（this.html）（四舍五入）；
如果（四舍五入<0）{
$（this.addClass（'negative'）；
}
})
})

div{
字号：2em；
字体系列：无衬线；
}
.轮{
颜色：蓝色；
}
.不，不{
颜色：红色；
}

1.436678
1.436678



-1.436678
-1.436678

正如其他人所评论的那样，您需要使用javascript（或服务器端处理）对数字进行四舍五入并添加条件格式

document.querySelectorAll('.number').forEach(function(number){

    var value = parseFloat(number.innerHTML);
    number.innerHTML = Math.round(value * 100) / 100;

    number.style.color = value < 0 ? 'red' : 'green'; // or add class...
});

document.querySelectorAll（'.number'）.forEach（函数（编号）{
var value=parseFloat（number.innerHTML）；
number.innerHTML=Math.round（值*100）/100；
number.style.color=值<0？'red'：'green'；//或添加类。。。
});

Html示例：

<span class="number">1.2345</span>
<span class="number">12345</span>
<span class="number">-1.2345</span>
<span class="number">-12345</span>

1.2345
12345
-1.2345
-12345

有人说这在CSS中是不可能的，下面是一个纯JS的方法

如果您动态更改号码，只需再次运行

roundNumber（）

函数即可

roundNumber=函数（）{
var numSel=document.querySelectorAll（'.number'），
numCount；
for（numCount=0；numCount
1.3453
2.1315
-1.3453
-2.1315
这在CSS中现在是可能的，只要您至少能够通过JavaScript设置自定义属性，或者通过DOM将其添加进来


p{
--准确度：1000000；
--二进制值：钳位(
0,
计算（var（--值）+1/var（--精度）），
计算（1/var（--精度））
)*var（--准确度）；
--绿色：计算值（var（--二进制值）*255）；
--红色：计算值（255-var（--green））；
颜色：rgb（var（--红色）、var（--绿色）、0）；
}
正
零
否定
您将需要使用JavaScriptCSS，它是专门为元素的外观设计的样式，但在实际更改现有内容方面没有真正的位置。您需要使用Javascript来完成这一点。另外，您的标记是什么样子的？了解如何读取/设置元素的样式非常重要。