gpt4 book ai didi

javascript - 使用 javascript 更改 css 背景不起作用

转载 作者:行者123 更新时间:2023-11-28 05:07:36 25 4
gpt4 key购买 nike

请注意,我是 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 .

不知道出了什么问题。

最佳答案

您实际上正在尝试在那里设置两个不同的属性。一个是背景,另一个是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 中设置了背景位置,则可以不设置它。

关于javascript - 使用 javascript 更改 css 背景不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41612495/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com