使用按鈕更改背景

我試圖使用戶點擊重新啓動按鈕時，它會將背景更改爲存儲在我的文件夾中的圖像。我有一對夫婦，然後你可以選擇重置回到正常的圖像，但由於某種原因，我不能得到它的工作，任何幫助會在這個問題上是巨大的：使用按鈕更改背景

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

使用按鈕更改背景

回答

相關問題