Soy nuevo en CSS y JavaScript, y quiero cambiar el color de fuente de esta sección de mi archivo .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>

Mi intento implica agregar un script .js a mi proyecto donde manejo tres casos:

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

No hay un archivo CSS que especifique qué color de fuente se debe representar, por lo que no estoy seguro de por qué esto no funciona. El texto siempre se representa en negro, independientemente del valor numérico en "Pr".

1
Zizzipupp 11 oct. 2019 a las 18:49

1 respuesta

La mejor respuesta
 <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>

Puede cambiar el atributo 'Texto' de asp: etiqueta

1
Nasira Mohamed Noufal 15 oct. 2019 a las 13:39