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

我设计了一个奖学金捐赠条，希望随着捐赠金额的增加，捐赠条的宽度也能增加。我现在有一个可以通过CSS改变“宽度”来扩展的条集。我对Javascript不太熟悉，但我尝试使用for循环和if语句来产生我想要的结果。 我要寻找的结果是一个循环，在这个循环中，如果提供的捐赠金额（整数）是（0<金额<500），那么结果将是0。如果提供的捐赠金额为（500<金额<1000），则结果为1。如果提供的捐赠金额为（1000<金额<1500），则结果为2。如果提供的捐赠金额为（1500<金额<2000），则结果为3。如果提供的捐赠金额为（2000<金额<2500），则结果为4。如果提供的捐赠金额为（2500<金额<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>

{
var amount=1163；//示例金额
var x=0；
如果（0<金额<500）{
x=0；
}如果（500<金额<1000）{
x=1；
}如果（1000<金额<1500）{
x=2；
}如果（1500<金额<2000）{
x=3；
}如果（2000<金额<2500）{
x=4；
}如果（2500<金额<3000）{
x=5；
}
文件编写（x）
}

javascript中的比较不是这样工作的。您需要使用and和/或or指定每个逻辑比较

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

如果（0

根据运算符优先级，其计算结果为

（0<1163<500）

---

这进一步计算为

（true<500）

，因为

1==true

，这些都计算为

true

，因此

x

始终为5。

要更改不需要修改CSS的元素的

宽度，可以直接使用javascript进行更改

document.getElementById("progress").style.width = w + "px";

（假设元素的
id
为
“progress”
，并且像素中所需的值为
w
）。
检查此项。。

{
var amount=1163；//示例金额
var x=0；
如果（0<金额&金额<500）{
x=0；
}如果（500<金额&金额<1000）{
x=1；
}如果（1000<金额&金额<1500）{
x=2；
}如果（1500<金额&金额<2000）{
x=3；
}如果（2000<金额&金额<2500）{
x=4；
}如果（2500<金额&金额<3000）{
x=5；
}
document.querySelector（“.inner”）.style.width=Math.floor（100/x）+“px”；
}
当您知道自己的位置在范围内时返回。
如果它小于某个数字，它就不能再高了

function getValue(value) {
if(value < 500) return 0;
if(value < 1000) return 1;
if(value < 1500) return 2;
...
...
}

var size = getValue(1235)

函数getValue（value）{
如果（值<500）返回0；
如果（值<1000）返回1；
如果（值<1500）返回2；
...
...
}
变量大小=getValue（1235）

//返回2
首先，您需要使用逻辑运算符进行匹配，例如x>0&x您应该避免逻辑测试，并以这种方式优化代码，从而获得预期的结果：

x=数学四舍五入（金额/500+.5）-1

您是否添加了90kb的jQuery库来计算宽度？
function getValue(value) {
if(value < 500) return 0;
if(value < 1000) return 1;
if(value < 1500) return 2;
...
...
}

var size = getValue(1235)

<div id="bar">....</div>

#bar { width: 100px; }

document.getElementById('bar').style.width= "500px";

or

document.getElementById('bar').style.width= x + "px";