如何通过javascript根据值更改文本颜色[重复]答案

【问题标题】：How to change color of text based on value via javascript [duplicate]如何通过javascript根据值更改文本颜色[重复]
【发布时间】：2021-06-27 05:43:49
【问题描述】：

我正在尝试根据“电压降”值更改文本的颜色。理想情况下，如果电压降高于 3%，我希望它为红色，如果低于 3%，则为绿色。

这是我当前的 HTML：

function printAnswer() {
    var volts = document.getElementsByName("voltDrop_volts")[0].value;
    var amps = document.getElementsByName("voltDrop_amps")[0].value;
    var length = parseFloat(document.getElementsByName("voltDrop_m")[0].value);
    var cableSize = parseFloat(document.getElementsByName("voltDrop_cableSize")[0].value);
    var ohm = 0;
    var reactance = 0;
    if (cableSize === 630) {
        ohm = 0.0418;
        reactance = 0.08;
    } else if (cableSize === 500) {
        ohm = 0.0506, reactance = 0.082;
    } else if (cableSize === 400) {
        ohm = 0.062;
        reactance = 0.0829;
    } else if (cableSize === 300) {
        ohm = 0.077;
        reactance = 0.0839;
    } else if (cableSize === 240) {
        ohm = 0.0948;
        reactance = 0.0847;
    } else if (cableSize === 185) {
        ohm = 0.123;
        reactance = 0.0862;
    } else if (cableSize === 150) {
        ohm = 0.153;
        reactance = 0.0868;
    } else if (cableSize === 120) {
        ohm = 0.188;
        reactance = 0.087;
    } else if (cableSize === 95) {
        ohm = 0.236;
        reactance = 0.0904;
    } else if (cableSize === 70) {
        ohm = 0.327;
        reactance = 0.0917;
    } else if (cableSize === 50) {
        ohm = 0.471;
        reactance = 0.0962;
    } else if (cableSize === 35) {
        ohm = 0.638;
        reactance = 0.101;
    } else if (cableSize === 25) {
        ohm = 0.884;
        reactance = 0.106;
    } else if (cableSize === 16) {
        ohm = 1.4;
        reactance = 0.111;
    } else if (cableSize === 10) {
        ohm = 2.23;
        reactance = 0.118;
    } else if (cableSize === 6) {
        ohm = 3.75;
        reactance = 0.128;
    } else if (cableSize === 4) {
        ohm = 5.61;
        reactance = 0.137;
    } else if (cableSize === 2.5) {
        ohm = 9.01;
        reactance = 0.143;
    } else if (cableSize === 1.5) {
        ohm = 16.5;
        reactance = 0.157;
    } else {
        msg = "Error";
    }
    var reactanceT = (reactance * length) / 1000;
    var ohmT = (ohm * length) / 1000;

    if (volts < 400) {
        var vDrop = ((ohm * 2) * (length / 1000) * amps);
    } else {
        var vDrop = (Math.sqrt(3)) * amps * (Math.sqrt((Math.pow(ohmT, 2)) + (Math.pow(reactanceT, 2))));
    }


    var vFinal = (volts - vDrop);
    var vDropPercent = ((vDrop / volts) * 100);
    console.log(volts, amps, length, cableSize, ohm);
    document.getElementById("vFinal").innerHTML = vFinal.toFixed(2);
    document.getElementById("vDrop").innerHTML = vDrop.toFixed(2);
    document.getElementById("vDropPercent").innerHTML = vDropPercent.toFixed(2);
    document.getElementById("resistanceCheck").innerHTML = ohmT.toFixed(4);
    document.getElementById("reactanceCheck").innerHTML = reactanceT.toFixed(4);
    
    if (vDropPercent > 3) {

        document.getElementsByName("results-box1").style.color = 'red';
    } else {
        document.getElementsByName("results-box1").style.color = 'green';
    }

}

<p>Final Voltage (V)</p>
                <div class="results-box">
                    <p id="vFinal" style="margin: 10px 0;">&nbsp;</p>
                </div>

                <p>Voltage Drop (V)</p>
                <div class="results-box">
                    <p id="vDrop" style="margin: 10px 0;">&nbsp;</p>
                </div>

                <p>Voltage Drop (%)</p>
                <div class="results-box1">
                    <p id="vDropPercent" style="margin: 10px 0;"></p>
                </div>

还有我的javascript：

function printAnswer() {
    var volts = document.getElementsByName("voltDrop_volts")[0].value;
    var amps = document.getElementsByName("voltDrop_amps")[0].value;
    var length = parseFloat(document.getElementsByName("voltDrop_m")[0].value);
    var cableSize = parseFloat(document.getElementsByName("voltDrop_cableSize")[0].value);
    var ohm = 0;
    var reactance = 0;
    if (cableSize === 630) {
        ohm = 0.0418;
        reactance = 0.08;
    } else if (cableSize === 500) {
        ohm = 0.0506, reactance = 0.082;
    } else if (cableSize === 400) {
        ohm = 0.062;
        reactance = 0.0829;
    } else if (cableSize === 300) {
        ohm = 0.077;
        reactance = 0.0839;
    } else if (cableSize === 240) {
        ohm = 0.0948;
        reactance = 0.0847;
    } else if (cableSize === 185) {
        ohm = 0.123;
        reactance = 0.0862;
    } else if (cableSize === 150) {
        ohm = 0.153;
        reactance = 0.0868;
    } else if (cableSize === 120) {
        ohm = 0.188;
        reactance = 0.087;
    } else if (cableSize === 95) {
        ohm = 0.236;
        reactance = 0.0904;
    } else if (cableSize === 70) {
        ohm = 0.327;
        reactance = 0.0917;
    } else if (cableSize === 50) {
        ohm = 0.471;
        reactance = 0.0962;
    } else if (cableSize === 35) {
        ohm = 0.638;
        reactance = 0.101;
    } else if (cableSize === 25) {
        ohm = 0.884;
        reactance = 0.106;
    } else if (cableSize === 16) {
        ohm = 1.4;
        reactance = 0.111;
    } else if (cableSize === 10) {
        ohm = 2.23;
        reactance = 0.118;
    } else if (cableSize === 6) {
        ohm = 3.75;
        reactance = 0.128;
    } else if (cableSize === 4) {
        ohm = 5.61;
        reactance = 0.137;
    } else if (cableSize === 2.5) {
        ohm = 9.01;
        reactance = 0.143;
    } else if (cableSize === 1.5) {
        ohm = 16.5;
        reactance = 0.157;
    } else {
        msg = "Error";
    }
    var reactanceT = (reactance * length) / 1000;
    var ohmT = (ohm * length) / 1000;

    if (volts < 400) {
        var vDrop = ((ohm * 2) * (length / 1000) * amps);
    } else {
        var vDrop = (Math.sqrt(3)) * amps * (Math.sqrt((Math.pow(ohmT, 2)) + (Math.pow(reactanceT, 2))));
    }


    var vFinal = (volts - vDrop);
    var vDropPercent = ((vDrop / volts) * 100);
    console.log(volts, amps, length, cableSize, ohm);
    document.getElementById("vFinal").innerHTML = vFinal.toFixed(2);
    document.getElementById("vDrop").innerHTML = vDrop.toFixed(2);
    document.getElementById("vDropPercent").innerHTML = vDropPercent.toFixed(2);
    document.getElementById("resistanceCheck").innerHTML = ohmT.toFixed(4);
    document.getElementById("reactanceCheck").innerHTML = reactanceT.toFixed(4);
    
    if (vDropPercent > 3) {

        document.getElementsByName("results-box1").style.color = 'red';
    } else {
        document.getElementsByName("results-box1").style.color = 'green';
    }

}

我在这里查看了类似的线程并应用了我发现的内容，但是我无法让它工作。 JS 代码的最后四行是我尝试根据值更改颜色的地方，但是无论我多么努力，它都无法正常工作。

【问题讨论】：

我给你做了一个sn-p。请添加相关的 HTML 和 CSS 使其成为 minimal reproducible example
为什么不document.getElementById("vDropPercent").style.color = vDropPercent > 3 ? "red" : "green";

标签： javascript html css colors

【解决方案1】：

有几个错误：

document.getElementsByName("results-box1") 应该是 document.getElementsByClassName("results-box1")（在 HTML 中，results-box1 是为属性 class 设置的值，而不是为属性 name 设置的值）
document.getElementsByClassName("results-box1") 返回一个集合，因此它没有 style.color 属性。

可能的解决方案：

将document.getElementsByName("results-box1").style.color 替换为document.getElementsByClassName("results-box1")[0].style.color
将document.getElementsByName("results-box1").style.color 替换为document.querySelector(".results-box1").style.color

【讨论】：

【解决方案2】：

document.getElementsByName 返回元素的集合。使用document.getElementsByName("results-box1")[0] 代替选择返回集合的第一个元素（假设第一个元素是您要更改样式的元素）。所以把你的代码改成

if (vDropPercent > 3) {
  document.getElementsByName("results-box1")[0].style.color = 'red';
} else {
  document.getElementsByName("results-box1")[0].style.color = 'green';
}

【讨论】：