In your case the easiest solution would by
msg = '<div style="color: #f00; font-size: 12px;">A</div>';
As AndyM said its better to use classes for your styles so you can separate the logic from the output which is definitely best practice.
=)
Вопрос
How can I add color/fontsize to the output/results in Javascript?
I have my if statements correct, just not sure how to add fontsize and font color.
var entgrade = parseFloat( document.getElementById("entgrade").value );
// calculate letter grade
var letter = "entgrade";
if( entgrade >= 90 ) {
msg = "<div>A</div>";
}
else if( entgrade >= 80 ) {
msg = "<div>B</div>";
}
else if( entgrade >= 70 ) {
msg = "<div>C</div>";
}
else if( entgrade >= 60 ) {
msg = "<div>D</div>";
}
else if( entgrade < 60 ) {
msg = "<div>F</div>";
Решение
In your case the easiest solution would by
msg = '<div style="color: #f00; font-size: 12px;">A</div>';
As AndyM said its better to use classes for your styles so you can separate the logic from the output which is definitely best practice.
=)
Другие советы
You can add styles directly to your current JS, but it's bad practice to hard code styling information. It's much better to add a class to each, and define the classes in your stylesheet.
Possible classes: gradeA
, gradeB
, etc. In each class, define your colors. gradeA
and gradeB
could be green, gradeC could be yellow. The text size could get smaller as well. Then use this for your script:
if( entgrade >= 90 ) {
msg = '<div class="gradeA">A</div>';
}
else if( entgrade >= 80 ) {
msg = '<div class="gradeB">B</div>';
}
else if( entgrade >= 70 ) {
msg = '<div class="gradeC">C</div>';
}
else if( entgrade >= 60 ) {
msg = '<div class="gradeD">D</div>';
}
else if( entgrade < 60 ) {
msg = '<div class="gradeF">F</div>';
}
An even cleaner way to do this would be to separate the logic from the output as much as possible.
if( entgrade >= 90 ) {
var grade = 'A';
}
else if( entgrade >= 80 ) {
var grade = 'B';
}
else if( entgrade >= 70 ) {
var grade = 'C';
}
else if( entgrade >= 60 ) {
var grade = 'D';
}
else if( entgrade < 60 ) {
var grade = 'F';
}
msg = '<div class="grade'+grade+'">'+grade+'<div>';
Try:
msg = "<div style=\"color:blue;font-size:20px;\">A</div>";