Question

如何在Javascript的输出/结果中添加color / fontsize？

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

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

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

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

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

=）

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

Answer 3

尝试：

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

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

3 个答案: