如何使用Javascript變量作為CSS寬度的值？

Question

我有一個獎學金捐贈酒吧，並希望隨着捐贈金額的增加，酒吧寬度會延長。 我目前通過使用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>

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。

Answer 2

你應該避免邏輯測試並以這種方式優化你的代碼，這會給你你期望的結果：
x=Math.round(amount/500+.5)-1;
http://jsfiddle.net/scraaappy/erL37s8k/

Answer 3

要更改元素的width ，您不需要修改CSS，您可以使用javascript直接更改它。

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

（假設元素的id是"progress"並且像素中的值是w ）。

Answer 4

看看這個... http://jsfiddle.net/wdth4eme/3/

{
var amount = 1163; //example amount
var x = 0;

if (0 < amount && amount < 500) {
    x = 0;
} if (500 < amount && amount < 1000) {
    x = 1;
} if (1000 < amount && amount < 1500) {
    x = 2;
} if (1500 < amount && amount < 2000) {
    x = 3;
} if (2000 < amount && amount < 2500) {
    x = 4;
} if (2500 < amount && amount < 3000) {
    x = 5;
}
   document.querySelector(".inner").style.width=Math.floor(100/x)+"px";
}

Answer 5

當你知道你的射程時返回。 如果它小於一定數量則不能更高。

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

var size = getValue(1235)

//返回2

Answer 6

首先，您需要邏輯運算符以達到匹配目的，例如x> 0 && x <= 50

我們在html中說，

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

在css中，

#bar { width: 100px; }

可以訪問

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

or

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