javascript - 使用 CSS 对数字进行四舍五入并以红色或绿色显示数字

Question

我正在从数据库中获取一些数值。该值是一个长十进制值。 0.45345345 或 1.2423432。我想将该值四舍五入到小数点后两位，如果该值为负数，我想以红色显示该值，如果该值为正数，我想以绿色显示。

是否可以通过 CSS 获得所需的结果？

Answer 1

现在这在 CSS 中是可能的，只要您至少能够通过 JavaScript 设置自定义属性，或通过 DOM 添加它。

p {
  --accuracy: 1000000;
  
  --binary-value: clamp(
    0,
    calc(var(--value) + 1 / var(--accuracy)),
    calc(1 / var(--accuracy))
  ) * var(--accuracy);
  
  --green: calc(var(--binary-value) * 255);
  --red: calc(255 - var(--green));
  
  color: rgb(var(--red), var(--green), 0);
}

<p style="--value:0.1">Positive</p>
<p style="--value:0">Zero</p>
<p style="--value:-0.1">Negative</p>