1
我从数据库中获取一些数值。该值是一个长十进制值。 0.45345345或1.2423432。我想将该值舍入到小数点后两位，如果该值为负值，我希望以红色显示该值，如果该值为正数，我希望以绿色显示。使用CSS四舍五入数字和显示红色或绿色的数字
是否有可能用CSS获得想要的结果？
A
回答
1
因为这是不可能只用CSS，你标记与jQuery的问题试试这个：
$(document).ready(function() {
$('.round').each(function() {
var number = parseFloat($(this).html()),
rounded = number.toFixed(2);
$(this).html(rounded);
if (rounded < 0) {
$(this).addClass('negative');
}
})
})div {
font-size: 2em;
font-family: sans-serif;
}
.round {
color: blue;
}
.round.negative {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1.436678</div>
<div class="round">1.436678</div>
<br><br>
<div>-1.436678</div>
<div class="round">-1.436678</div>
0
正如其他人评论，您将需要使用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...
});
HTML示例：
<span class="number">1.2345</span>
<span class="number">12345</span>
<span class="number">-1.2345</span>
<span class="number">-12345</span>
0
正如有人说这是不可能的CSS，这里是一个纯JS办法做到这一点。
如果您在飞行中更改您的号码，则可以再次运行roundNumber()函数。
roundNumber = function() {
var numSel = document.querySelectorAll('.number'),
numCount;
for (numCount = 0; numCount < numSel.length; numCount++) {
var numInd = numSel[numCount].innerHTML;
if (numInd < 0) {
numSel[numCount].style.color = "red";
};
numSel[numCount].innerHTML = (Math.round(numInd * 100)/100)
}
}
roundNumber();<li class="number">1.3453</li>
<li class="number">2.1315</li>
<li class="number">-1.3453</li>
<li class="number">-2.1315</li>
您将需要使用JavaScript – epascarello
CSS是专为时尚元素的外观，但并没有真正有关于真正改变现有的内容的地方。你需要使用Javascript来完成这一点。另外，你的标记是什么样的？了解确定如何阅读/设计你的元素是很重要的。 –