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

do you want to add the styles to the divs you create? – nils Mar 06 '14 at 19:01 — nils, Mar 06 '14 at 19:01

nils · Accepted Answer · 2014-03-06T19:41:37.210

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.

=)

edited Mar 06 '14 at 19:41

answered Mar 06 '14 at 19:03

nils

1,668
14
15

Great! Both your answers helped me out tremendously. Thank you. – user3389685 Mar 06 '14 at 19:06
Bad practice to add styles inline. http://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css – Kelderic Mar 06 '14 at 19:15
You are right - classes would be best practice but it was not part of the question. So why did you downvote this answer.. =( – nils Mar 06 '14 at 19:18
Because the question was how to add colors. You can add colors both ways (inline and with classes), but one way is a way that shouldn't be promoted. – Kelderic Mar 06 '14 at 19:24
Thats not true. It depends on what you want to achieve. There are(!) some reasons why you should use inline styles. But again, this is not the topic right here and furthermore: You can not downvote an accepted anser simply because you think its not the best (http://stackoverflow.com/help/privileges/vote-down). – nils Mar 06 '14 at 19:28
"...an answer that is clearly and perhaps dangerously incorrect...". This isn't dangerous, but it is clearly incorrect. You should not use inline styles to add color. It is bad practice, it is something we should avoid, not tell people to use. – Kelderic Mar 06 '14 at 19:32
You are using inline-styles on your on website (http://www.andymercer.net/) which actually is totally fine. Or not? – nils Mar 06 '14 at 19:32
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/49174/discussion-between-nils-and-andym) – nils Mar 06 '14 at 19:33
How can I position the output under the text box? I positioned the text box to the center right. Now the outcome is appearing in the middle and not under neath the text box. – user3389685 Mar 06 '14 at 20:31
Nvm, i figured it out. – user3389685 Mar 06 '14 at 20:37

score 1 · Answer 2 · answered Mar 06 '14 at 19:05

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

I see, thanks for this. I'll give it a shot as well, just for practice. — user3389685, Mar 06 '14 at 19:09
Glad to help! I added a suggestion as well, which would clean up the code further. — Kelderic, Mar 06 '14 at 19:10

score 0 · Answer 3 · answered Mar 06 '14 at 19:03

0

Try:

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

answered Mar 06 '14 at 19:03

PlasmaPower

1,864
15
18

Great! Both your answers helped me out tremendously. Thank you. – user3389685 Mar 06 '14 at 19:07

Add color/font size/css to Javascript

3 Answers3