使用按钮更改背景

我试图使用户点击重新启动按钮时，它会将背景更改为存储在我的文件夹中的图像。我有一对夫妇，然后你可以选择重置回到正常的图像，但由于某种原因，我不能得到它的工作，任何帮助会在这个问题上是巨大的：使用按钮更改背景

HTML按钮

<a href="#" onclick="changeLook()">ReStyle</a> 
<a href="#" onclick="changeBack()">Reset</a>

的Javascript

var counter = 0; 
function changeLook(){ 
    counter += 1; 
    switch (counter) { 
     case 1: 
      document.body.style.backgroundImage = "../Image/BackgroundImage2.jpg"; 
      break; 
     case 2: 
      document.body.style.backgroundImage = "../Image/BackgroundImage3.jpg"; 
      break; 
     case 3: 
      counter = 0; 
      document.body.style.backgroundImage = "../Image/BackgroundImage4.jpg"; 
      break; 
    } 
} 

function changeBack(){ 
    document.body.style.backgroundImage = "../Image/BackgroundImage1.jpg"; 
}

CSS

body { 
    padding-top: 23px; 
    padding-bottom: 10px; 
    background: url('../Image/BackgroundImage1.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

来源

2016-04-30 Nevershow2016

尝试删除JavaScript图像路径中的“../”。 – Aziz

你的项目的目录结构是什么样的？ –

嗯我不知道，根本就没有工作，我有正确的决策权，也没有错误等，它真的很奇怪 – Nevershow2016

只需添加url(图像路径)像：

document.body.style.backgroundImage = "url(../Image/BackgroundImage2.jpg)";

var counter =0; 
 
function changeLook() { 
 
    counter += 1; 
 

 
    switch (counter) { 
 
     case 1: 
 
      document.body.style.backgroundImage = "url(http://placehold.it/200x200)"; 
 
      break; 
 
     case 2: 
 
      document.body.style.backgroundImage = "url(http://placehold.it/300x300)"; 
 
      break; 
 
     case 3: 
 
      counter = 0; 
 
      document.body.style.backgroundImage = "url(http://placehold.it/400x400)"; 
 
      break;   
 
    } 
 
} 
 

 
function changeBack(){ 
 
    document.body.style.backgroundImage = "url(http://placehold.it/200x200)"; 
 
}

body { 
 
    padding-top: 23px; 
 
    padding-bottom: 10px; 
 
    background: url('http://placehold.it/200x200') no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

<a href="#" onclick="changeLook()">ReStyle</a> 
 
<a href="#" onclick="changeBack()">Reset</a>

来源

2016-04-30 20:16:05

嗯，这实际上让我更接近正确的答案，但现在背景变灰 – Nevershow2016

我只是说背景它自我，去grrey，所以根本没有背景 – Nevershow2016

好吧它得到它的工作，对于一些resaon我不需要使用../但文件路径你必须回去无论如何谢谢xx – Nevershow2016

你绝对可以使用你当前的代码。如果它不起作用，那么问题很可能是您的CSS文件中您的background属性的相对路径不正确。

重要的是要记住，CSS文件中使用的路径将相对于CSS文件本身，而不是它被引用的地方。但是，当您在Javascript代码中使用相对引用时，将相对于引用Javascript的位置（即您的HTML文档）进行相关引用。

你可能要考虑定义CSS样式来处理这些变化：

body.background1 { 
    background: url('../Images/Image1.jpg'); 
} 
body.background2 { 
    background: url('../Images/Image2.jpg'); 
} 
/* Continue as necessary */

，然后只需用更新的类为您<body>元素的Javascript：

// Use the counter to determine which style to apply 
switch (counter) { 
    case 1: 
     document.body.className = "background1"; 
     break; 
    case 2: 
     document.body.className = "background2"; 
     break; 
    case 3: 
     counter = 0; 
     document.body.className = "background3"; 
     break;   
}

例

您可以see a very basic example of this here和演示如下：

来源

2016-04-30 20:11:50

_“它将相对于Javascript定义的位置”_ - 我认为你的意思是相对于** HTML文档** _ – Turnip

是的，我想我的意思是引用而不是定义的（因为Javascript将从HTML文档中引用并相对于它）。我已经更新了这些措词。 –

啊感谢您的反馈，我试了这个，但它似乎并没有工作很好，它真的很奇怪 – Nevershow2016

这可能是因为你错误地引用您的文件路径。在浏览器中检查您的开发者控制台。你看到任何404错误？

此外，还可以通过使用模简化changeLook功能：

var counter = 1; 
function changeLook(){ 
    counter = counter % 4 + 1; 
    document.body.style.backgroundImage = "../Image/BackgroundImage" + counter + ".jpg"; 
} 

function changeBack() { 
    document.body.style.backgroundImage = "../Image/BackgroundImage1.jpg"; 
}

来源

2016-04-30 20:15:06

使用按钮更改背景

回答

相关问题