javascript - 如何使用 Javascript 变量作为 CSS 宽度的值？

Question

我设计了一个奖学金捐赠条，希望条的宽度随着捐赠金额的增加而增加。我目前设置了可以通过使用 CSS 更改“宽度”来扩展的栏。我不太熟悉 Javascript，但我尝试使用 for 循环和 if 语句来产生我正在寻找的结果。 我要查找的结果是一个循环，其中如果提供的捐赠金额(整数)为(0 < 金额 < 500)，则结果将为 0。如果提供的捐赠金额为(500 < 金额 < 1000)，则结果将为1。如果提供的捐赠金额为(1000 < amount < 1500)，则结果为2。如果提供的捐赠金额为(1500 < amount < 2000)，则结果为3。如果提供的捐赠金额为(2000 < amount < 2500)，结果为4。如果提供的捐赠金额为(2500 < amount < 3000)，结果为5。 我需要这个结果是一个整数，它代表我导出的方程式的一个变量，以确定条形宽度所需的像素数量，以便正确匹配捐赠金额。这是我到目前为止想出的代码。我需要帮助才能实现我的目标。截至目前，代码仅显示最后一个数字。提前致谢!

<script>
{
    var amount = 1163; //example amount
    var x = 0;

    if (0 < amount < 500) {
        x = 0;
    } if (500 < amount < 1000) {
        x = 1;
    } if (1000 < amount < 1500) {
        x = 2;
    } if (1500 < amount < 2000) {
        x = 3;
    } if (2000 < amount < 2500) {
        x = 4;
    } if (2500 < amount < 3000) {
        x = 5;
    }
        document.write(x)
}
</script>

Answer 1

javascript 中的比较不是这样工作的。您需要指定与 ANDS 和/或 ORS 的每个逻辑比较。

if (0 < amount && amount < 500) { ... } // or x < 500 whichever logical proceed

根据运算符优先级，计算结果为 (0 < 1163 < 500)

这进一步评估为 (true < 500)自 1 == true , 这些都是评估到 true ，因此 x永远是 5。