用javascript改变css背景不起作用
[英]changing css background with javascript not working
问题描述
Just as a heads up, I'm new to javascript... I'm trying to do the following: 
就像一个抬头，我是javascript的新手...我正在尝试执行以下操作：
HTML: Got a <body id="example> and a hidden counter <input id="counter" value="1"> HTML：有一个<body id="example>和一个隐藏的计数器<input id="counter" value="1">
and the following javascript (passing 1 or -1 thru the function): 和以下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;
}
I can't seem to get the background to change to the next image in the folder I'm pointing to from "exampleImg1" to "exampleImg2" and so on. 我似乎无法将背景更改为我从“exampleImg1”指向“exampleImg2”的文件夹中的下一个图像，依此类推。
I tested this with an alert(newBgImage) to make sure I was escaping my quotes properly and I am, or at least I think so (Also, this tells me it's breaking down at the last line of code). 我用一个alert(newBgImage)对此进行了测试，以确保我正确地逃避了我的报价而且我是，或者至少我是这么认为的（另外，这告诉我它在最后一行代码中出现故障）。
I know I can do this by changing class names instead and have separate classes in the CSS but my CSS would be a lot cleaner doing it this way AND I tested that just to see and it wouldn't even update style.className . 我知道我可以通过更改类名来实现这一点，并在CSS中使用单独的类，但我的CSS会更加清洁这样做我测试它只是为了看到它甚至不会更新style.className 。
Not sure what what's going wrong. 不知道出了什么问题。
3 个解决方案
解决方案1
0 2017-01-12 12:15:50
Let me know if this works 让我知道这个是否奏效
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;
}
解决方案2
0 2017-01-12 12:17:56
The background should be a string. 背景应该是一个字符串。 In alert are you getting something like this "url(\\'../exampleFolder/exampleImg" + n + ".jpg\\') no-repeat center center fixed" ? 在警报中你得到这样的东西“url（\\'../ exampleFolder / exampleImg”+ n +“.jpg \\”）无重复中心固定“？
if yes then style property would become: 如果是，则样式属性将变为：
style="background: "url('../exampleFolder/exampleImg" + n + ".jpg') no-repeat center center fixed""
this doesn't works because it's not the way. 这不起作用，因为它不是那样的。
Since this is already string what you need to do is like the following: 由于这已经是字符串，您需要执行的操作如下所示：
var newBgImage = "url('../exampleFolder/exampleImg" + n + ".jpg') no-repeat center center fixed";
document.getElementById("example").style.background = newBgImage;
This would resolve your issue. 这可以解决您的问题。
解决方案3
0 已采纳 2017-01-12 12:31:04
You are actually trying to set two different properties over there. 你实际上是想在那里设置两个不同的属性。 One is the background and the other one is the backgroundPosition. 一个是背景，另一个是backgroundPosition。 So you need to split it into 2. 所以你需要把它分成2个。
var newBgImage = "url('../exampleFolder/exampleImg" + n + ".jpg')"
document.getElementById("example").style.background = newBgImage;
document.getElementById("example").style.backgroundPosition = "no-repeat center center fixed"
Or you can just not set the backgroundPosition if it was already set in HTML. 或者，如果已经在HTML中设置了backgroundPosition，则可以不设置它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.