将颜色/字体大小/css 添加到 Javascript答案

【问题标题】：Add color/font size/css to Javascript将颜色/字体大小/css 添加到 Javascript
【发布时间】：2014-03-06 18:59:02
【问题描述】：

如何在 Javascript 的输出/结果中添加颜色/字体大小？

我的 if 语句是正确的，只是不确定如何添加字体大小和字体颜色。

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

【问题讨论】：

您想将样式添加到您创建的 div 中吗？

标签： javascript css if-statement colors font-size

【解决方案1】：

在您的情况下，最简单的解决方案是

msg = '<div style="color: #f00; font-size: 12px;">A</div>';

正如 AndyM 所说，最好为您的样式使用类，这样您就可以将逻辑与输出分开，这绝对是最佳实践。

【讨论】：

太棒了！你的两个答案都极大地帮助了我。谢谢。
内联添加样式的错误做法。 stackoverflow.com/questions/2612483/…
你是对的 - 课程是最佳实践，但这不是问题的一部分。那你为什么不赞成这个答案.. =(
因为问题是如何添加颜色。您可以通过两种方式添加颜色（内联和类），但一种方式是不应该推广的方式。
那不是真的。这取决于您想要达到的目标。有（！）一些你应该使用内联样式的原因。但同样，这不是这里的主题，此外：您不能仅仅因为您认为它不是最好的（stackoverflow.com/help/privileges/vote-down）而对已接受的分析器投反对票。

【解决方案2】：

您可以直接将样式添加到您当前的 JS，但是硬编码样式信息是不好的做法。最好为每个类添加一个类，并在样式表中定义这些类。

可能的类：gradeA、gradeB 等。在每个类中，定义您的颜色。 gradeA 和gradeB 可以是绿色，C 级可以是黄色。文本大小也可以变小。然后将其用于您的脚本：

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

一种更简洁的方法是尽可能将逻辑与输出分开。

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

【讨论】：

我明白了，谢谢。我也会试一试，只是为了练习。
很高兴为您提供帮助！我还添加了一个建议，这将进一步清理代码。

【解决方案3】：

试试：

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

【讨论】：

太棒了！你的两个答案都极大地帮助了我。谢谢。