ASP.NET 基于 JavaScript 值的条件格式

Question

我是 CSS 和 JavaScript 的新手，我想更改 .aspx 文件这一部分的字体颜色：

#.aspx
<script src="~/CSS/traffic_lights.js" type="text/javascript"></script> <!-- This handles red/amber/green-->
<div class="Pr">
    <h3>Say what you will about this number:</h3>
    <asp:Label ID="lblResults2" runat="server" Font-Bold="true"></asp:Label>
</div>

我的尝试包括将 .js 脚本添加到我处理三种情况的项目中：

#traffic_lights.js

//Red
if (document.getElementById("lblResults2").innerHTML >= 0 &&
    document.getElementById("lblResults2").innerHTML <= 30) {
    document.getElementById("lblResults2").style.color = "red";
}

//Amber (or orange)
if (document.getElementById("lblResults2").innerHTML > 30 &&
    document.getElementById("lblResults2").innerHTML <= 60) {
    document.getElementById("lblResults2").style.color = "orange";
}

//Green
if (document.getElementById("lblResults2").innerHTML > 60 &&
    document.getElementById("lblResults2").innerHTML < 101) {
    document.getElementById("lblResults2").style.color = "green";
}

没有 CSS 文件指定应该呈现哪种字体颜色，所以我不确定为什么这不起作用。无论 "Pr".

中的数值如何，文本始终呈现为黑色

Answer 1

 <script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function () {
        var val = parseInt($("#lblResults2").text());
        if (val >= 0 && val <= 30) {
            $("#lblResults2").css("color", "red");
        }
        else if (val > 30 && val <= 60) { $("#lblResults2").css("color", "orange"); }
        else if (val > 60 && val <= 100) { $("#lblResults2").css("color", "green"); }

    });

</script>



 <div class="Pr">
<h3>Say what you will about this number:</h3>
<asp:Label ID="lblResults2" runat="server" Font-Bold="true" Text="99" ClientIDMode="Static"></asp:Label>

您可以更改 asp:label 的 'Text' 属性

ASP.NET 基于 JavaScript 值的条件格式

ASP.NET conditional formatting based on value with JavaScript

javascript

css

asp.net

colors

getelementbyid