2016-04-03 132 views
1

我已經做了一個包含10個問題的測驗,並將您的測試點存儲在一個名爲total的值中。你能夠得到的總積分是20,所以當total > 10時,我想要背景變成紅色如何更改網站背景

我已經使用CSS設置背景在我的網站在這裏:

<style type="text/css"> 
    body{ 
    background-image: url("twins.jpg"); 
} 

但是我似乎無法讓我的條件才能正常工作。我已經試過:

if (total > 10) { 
     document.body.style.backgroundColor = "red"; 
    } 

我已經試過:

if (total > 10) { 
     document.body.style.backgroundColor = "#AA0000"; 
    } 

和:

if (total > 10) { 
     document.getElementById('body').style.backgroundImage = "url(ashishot.jpg)"; 
    } 

但似乎沒有任何工作。也許我把我的if聲明放在錯誤的地方,或者我試圖錯誤地設置背景,我只想知道這是否是將背景圖像從CSS更改爲JavaScript的正確方法。

+0

它是否進入你的if循環? – dkengaroo

+0

你的代碼是正確的,它只取決於你執行它。就像dkengaroo說的那樣,只要你增加總數(在每個問題答案後) – qdev

+0

,你就需要進行測試,無論你在哪裏做這個檢查,總數值不超過10個。你有多個「total」變量發生衝突。同時請記住,DOM元素可以直接在窗口範圍內通過它們的id來引用。因此,如果你有一個元素與'id =「total」'它可能會造成混亂。 – Redu

回答

0

是的,這是使用JS更改背景顏色的正確方法。

document.body.style.backgroundColor = "#AA0000"; 

請嘗試:

  • 配售alert() IF塊裏面,看看塊執行
  • 看看是否有被疊加(Z索引)對身體
0

的javascript指令正確

document.body.style.backgroundColor = "red"; 
如果條件

你的錯誤可能是,檢查總的正常工作usign控制檯或警報檢查:

console.log(total); 

alert(total); 
0

你有一個以上的問題

  1. 直接使用body屬性

    document.body.style.backgroundImage 
    
  2. 您需要引用整個任務,你需要內部報價圖片

    'url("ashishot.jpg")'; 
    

工作例如:

function setBackground() { 
 
    document.body.style.backgroundImage = 'url("http://lorempixel.com/300/200/")'; 
 
} 
 
setTimeout(setBackground, 2000);
body { 
 
    background-image: url("http://lorempixel.com/400/200/"); 
 
}

0
if (total > 10) { 
    document.body.style.backgroundImage = "url(ashishot.jpg)"; 
} 

body不是一個id。另外,設置background-color將不起作用,因爲瀏覽器首先處理background-image。要顯示background-color而不是background-image,只需刪除圖像即可。設置類更靈活。

document.body.classList.add("total");
body { 
 
    background-image: url("http://www.studiocity-macau.com/uploads/images/SC/Entertainment/Batman/batman_share.jpg"); 
 
} 
 

 
body.total { 
 
    background-image: none; 
 
    background-color: red; 
 
}

0

要知道,你的backgound-image將是你在if塊設置顏色的頂部。如果圖像完全覆蓋背景,則不會注意到更改background color的效果。

document.body.style.backgroundColor = "#AA0000"document.body.style.backgroundColor = "red"都是有效的(儘管"red" == "#FF0000")。

確保在每次增加total時都會運行if語句。