用javascript改變css背景不起作用

Question

就像一個抬頭，我是javascript的新手...我正在嘗試執行以下操作：

HTML：有一個<body id="example>和一個隱藏的計數器<input id="counter" value="1">

和以下javascript（通過函數傳遞1或-1）：

function changeBackground(val) {
    "use strict";
    var n = parseInt(document.getElementById("counter").value, 10) + val;

    if (n > 15) {
        n = 1;
    }

    if (n < 1) {
        n = 15;
    }

    document.getElementById("counter").value = n;

    var newBgImage = "\"url(\'../exampleFolder/exampleImg" + n + ".jpg\') no-repeat center center fixed\"";

    document.getElementById("example").style.background = newBgImage;
}

我似乎無法將背景更改為我從“exampleImg1”指向“exampleImg2”的文件夾中的下一個圖像，依此類推。

我用一個alert(newBgImage)對此進行了測試，以確保我正確地逃避了我的報價而且我是，或者至少我是這么認為的（另外，這告訴我它在最后一行代碼中出現故障）。

我知道我可以通過更改類名來實現這一點，並在CSS中使用單獨的類，但我的CSS會更加清潔這樣做我測試它只是為了看到它甚至不會更新style.className 。

不知道出了什么問題。

Answer 1

讓我知道這個是否奏效

function changeBackground(val) {
"use strict";
var n = parseInt(document.getElementById("counter").value, 10) + val;

if (n > 15) {
    n = 1;
}

if (n < 1) {
    n = 15;
}

document.getElementById("counter").value = n;

var newBgImage = "\"url('../exampleFolder/exampleImg" + n + ".jpg') no-repeat           center center fixed\"";

document.getElementById("example").style.background = newBgImage;
}

Answer 2

背景應該是一個字符串。 在警報中你得到這樣的東西“url（\\'../ exampleFolder / exampleImg”+ n +“.jpg \\”）無重復中心固定“？

如果是，則樣式屬性將變為：

style="background: "url('../exampleFolder/exampleImg" + n + ".jpg') no-repeat center center fixed""

這不起作用，因為它不是那樣的。

由於這已經是字符串，您需要執行的操作如下所示：

var newBgImage = "url('../exampleFolder/exampleImg" + n + ".jpg') no-repeat center center fixed";

document.getElementById("example").style.background = newBgImage;

這可以解決您的問題。

Answer 3

你實際上是想在那里設置兩個不同的屬性。 一個是背景，另一個是backgroundPosition。 所以你需要把它分成2個。

var newBgImage = "url('../exampleFolder/exampleImg" + n + ".jpg')"
document.getElementById("example").style.background = newBgImage;
document.getElementById("example").style.backgroundPosition = "no-repeat center center fixed"

或者，如果已經在HTML中設置了backgroundPosition，則可以不設置它。

用javascript改變css背景不起作用

問題描述

3 個解決方案

解決方案1
0 2017-01-12 12:15:50

解決方案2
0 2017-01-12 12:17:56

解決方案3
0 已采納 2017-01-12 12:31:04

用javascript改變css背景不起作用

問題描述

3 個解決方案

解決方案1 0 2017-01-12 12:15:50

解決方案2 0 2017-01-12 12:17:56

解決方案3 0 已采納 2017-01-12 12:31:04

解決方案1
0 2017-01-12 12:15:50

解決方案2
0 2017-01-12 12:17:56

解決方案3
0 已采納 2017-01-12 12:31:04