Question

我正在创建一个BMI指数计算器到目前为止一切都很好，当我想到我应该如何能够根据他们的BMI结果将div类的背景颜色更改为某种颜色时，我迷失了。

例如：

如果此人underweight，则应为：grey
如果此人normal，则应为：blue
如果此人overweight，则应为：orange
如果此人obese，则应为：red

我该怎么做请帮助...

这是HTML CSS和Javascript

<html>
<head>
    <title>BMI Calculator</title>
<script type="text/javascript">
    function computeBMI() {
    //Obtain user inputs
    var height = Number(document.getElementById("height").value);
    var heightunits = document.getElementById("heightunits").value;
    var weight = Number(document.getElementById("weight").value);
    var weightunits = document.getElementById("weightunits").value;

    if (heightunits == "inches") height /= 39.3700787;
    if (weightunits == "lb") weight /= 2.20462;
    var BMI = weight / Math.pow(height, 2);     
    document.getElementById("output").innerText = Math.round(BMI * 100) / 100;

    var result;
    if (BMI <= 18.5) {
        result = 'underweight';
    } else if (BMI <= 24.9) {
        result = 'Normal';
    } else if (BMI <= 29.9) {
        result = 'Overweight';
    } else {
        result='Obese';
    }
   }
</script>

<style type="text/css">
    .resultclass{ background-color:yellow; width:500px; height:300px;}
    .underweight{ background-color:grey; width:500px; height:300px;}
    .normal{ background-color:blue; width:500px; height:300px;}
    .overweight{ background-color:orange; width:500px; height:300px;}
    .obese{ background-color:red; width:500px; height:300px;}
</style>
</head>
<body>
<h1>Body Mass Index Calculator</h1>
<p>Enter your height: <input type="text" id="height"/>
    <select type="multiple" id="heightunits">
        <option value="metres" selected="selected">metres</option>
        <option value="inches">inches</option>
    </select>
</p>
<p>Enter your weight: <input type="text" id="weight"/>
    <select type="multiple" id="weightunits">
    <option value="kg" selected="selected">kilograms</option>
    <option value="lb">pounds</option>
    </select>
    </p>
<input type="submit" value="computeBMI" onclick="computeBMI();">
<div class="resultclass">
    <h1>Your BMI is: <span id="output">?</span></h1>
    <h1>This means you are: <span id="resultdiv">?</span></h1>
</div>
</body>
</html>

Answer 1

在您的computeBMI（）函数中，您可以将类设置为您想要的类：

document.getElementById("resultdiv").className = "obese";

Answer 2

您可以使用以下字典：

var bg_colors = {'underweight': 'gray', 'Normal': 'blue', 'Overweight': 'red', 'Obese': '#ABC'}

并添加：

document.getElementById("resultDiv").style.backgroundColor=bg_colors[result];

计算结果后

。请注意，我给div元素赋予了id“resultDiv”。

Answer 3

在CSS中，您可以拥有某种颜色的类：

.underweight {
    color: grey;
}
.overweight {
    color: blue;
}
...

然后正如Severian所说，你可以根据BMI值将类添加到div中。要保存任何现有的类，您应该使用'classList'属性，该属性适用于除IE 8以外的大多数浏览器：

document.getElementById("resultdiv").classList.add("underweight");

请记住在用户输入新信息时删除任何以前的BMI类。

Answer 4

您可以使用jQuery通过一行代码执行此操作：

$("#resultdiv").addClass("obese");

http://api.jquery.com/addclass/

如果你需要先删除一个类，那就是这样的：

$("#resultdiv").removeClass("classname").addClass("obese");

https://api.jquery.com/removeClass/

使用Javascript更改CSS类以便能够更改颜色

4 个答案: