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

我对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>

#.aspx
说出你对这个号码的看法：

我的尝试包括在我的项目中添加一个.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";
}

#traffic_lights.js
//红色的
if（document.getElementById（“lblResults2”）.innerHTML>=0&&
document.getElementById（“lblResults2”）.innerHTML 30&&
document.getElementById（“lblResults2”）.innerHTML 60&&
document.getElementById（“lblResults2”）.innerHTML<101）{
document.getElementById（“lblResults2”）.style.color=“绿色”；
}

没有CSS文件指定应该呈现哪种字体颜色，所以我不确定为什么这不起作用。无论“Pr”中的数值是多少，文本始终以黑色呈现。

$（文档）.ready（函数（）{
var val=parseInt（$（“#lblResults2”）.text（）；
如果（val>=0&&val 30&&val 60&&val，则您的
没有文本。此外，您是否使用母版页？如果是这样，则ID实际上可能不是“lblResults2”，则必须添加
clientMode=“Static”
添加到标签上。另外，javascript是否在页面完全加载后运行？
console.log
document.getElementById（“lblResults2”）

并查看它是未定义的还是实际找到的。它在code-behind.cs文件中有一个关联的文本字段：

lblResults2.text=pr_text

也在您的javascript

中。innerHTML

将是一个字符串而不是一个int，但您将其作为int进行比较（

=0

）。您必须先获取字符串值，然后

parseInt

才能将其设置为int进行比较。

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