I am getting some numeric value from database. This value is a long decimal value. 0.45345345 or 1.2423432. I want to round-off this value to two decimal places and if the value is negative, I want to show the value in RED color and if the value is positive, I want to show it in green color.

Is it possible to get the desired result with CSS?

I am getting some numeric value from database. This value is a long decimal value. 0.45345345 or 1.2423432. I want to round-off this value to two decimal places and if the value is negative, I want to show the value in RED color and if the value is positive, I want to show it in green color.

Is it possible to get the desired result with CSS?

• javascript
• jquery
• css
• stylus

• 3 you are going to need to use JavaScript – epascarello Commented Jun 10, 2016 at 20:07
• CSS is designed specifically to style the appearance of elements, but doesn't really have a place with regards to actually changing existing content. You'll need to use Javascript to acplish this. Additionally, what does your markup look like? It would be important to know with regards to determining how to read / style your elements. – Rion Williams Commented Jun 10, 2016 at 20:11

5 Answers 5

This is now possible in CSS, so long as you’re able to at least set a custom property through JavaScript, or add it in through the 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>

Since this isn't possible with just CSS and you tag the question with Jquery try this:

$(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./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>

As others have mented, you will need to use javascript (or server side processing) to round the number and add conditional formatting.

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...
});

Example Html:

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

As it's been said this isn't possible in CSS, here is a pure JS way to do it.

if you change your number on the fly you can just run the roundNumber() function again.

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>

Just use sass:math

EXAMPLE:

@use "sass:math";

// convert pixels to inches for print
// 96px per inch
// round to the hundredth decimal point
@function pxToIn($pixels) {
  @return math.round(($pixels / 96)*1000)/1000;
}

@page {
  size: A4 portrait;
  margin: pxToIn(25);
}