更改 css 背景 javascript 无效

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) 测试了这个以确保我正确地转义了我的引号并且我是，或者至少我是这样认为的（另外，这告诉我它在代码的最后一行崩溃了） .

我知道我可以通过更改 class 名称来做到这一点，并在 CSS 中有单独的 classes 但我的 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\') no-repeat center center fixed" ?

如果是，那么样式属性将变为：

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，您可以不设置它。

更改 css 背景 javascript 无效

changing css background with javascript not working

javascript

styles