Ich bekomme einen numerischen Wert aus der Datenbank. Dieser Wert ist ein langer Dezimalwert. 0.45345345 oder 1.2423432. Ich möchte diesen Wert auf zwei Dezimalstellen abrunden und wenn der Wert negativ ist, möchte ich den Wert in ROT anzeigen und wenn der Wert positiv ist, möchte ich ihn in grüner Farbe zeigen.mit CSS zur Abrundung der Nummer und zeigen Zahlen in rot oder grün
Ist es möglich, mit CSS das gewünschte Ergebnis zu erzielen?
Da dies nicht möglich, mit nur CSS und Sie markieren die Frage mit JQuery versuchen Sie dies:
$(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>Wie andere haben gesagt, müssen Sie Javascript verwenden (oder Server Seitenverarbeitung), um die Zahl zu runden und bedingte Formatierung hinzuzufügen.
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...
});
Beispiel Html:
<span class="number">1.2345</span>
<span class="number">12345</span>
<span class="number">-1.2345</span>
<span class="number">-12345</span>
Wie es ist gesagt worden, dies in CSS nicht möglich ist, hier ist eine reine JS Art und Weise, es zu tun.
Wenn Sie Ihre Nummer im laufenden Betrieb ändern, können Sie einfach die roundNumber() Funktion erneut ausführen.
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>
Sie JavaScript – epascarello
CSS entworfen verwenden gehen zu müssen, ist speziell das Aussehen der Elemente stylen, haben aber nicht wirklich einen Platz in Bezug auf bestehende Inhalte tatsächlich zu ändern. Sie müssen Javascript verwenden, um dies zu erreichen. Wie sieht Ihr Markup aus? Es wäre wichtig zu wissen, wie Sie Ihre Elemente lesen/stylen. –