Add color/font size/css to Javascript

Question

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>";

Answer 1

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.

=)

Answer 2

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>';

Answer 3

Try:

msg = "<div style=\"color:blue;font-size:20px;\">A</div>";