的JavaScript：無法改變div的背景顏色，當一個按鈕被點擊

你好，我想換一個div的背景顏色單擊按鈕時，並改回再次點擊，但我不能讓它通過一些...請幫助...謝謝！的JavaScript：無法改變div的背景顏色，當一個按鈕被點擊

window.onload = function(){ 
    var oBtn1 = document.getElementById('btn1'); 
    var oDiv = document.getElementById('div1'); 
    var sDivClass = oDiv.className; 

    oBtn1.onclick = function() { 
     if (sDivClass == 'div1') { 
      sDivClass = 'toGreen'; 
      oBtn1.value = 'to Red'; 
     } else { 
      sDivClass = 'div1'; 
      oBtn1.value = 'To Green'; 
     } 
    } 
}

HTML：

<div class="div1" id="div1"></div> 
<input id="btn1" type="button" value="To Green" />

CSS：

.div1 { 
    width:100px; 
    height: 100px; 
    background-color: red; 
} 

.toGreen { 
    width:100px; 
    height: 100px; 
    background-color: green; 
}

來源

2014-10-04 Serene

你只改變局部變量的值，而不是與DIV關聯類。嘗試

oBtn1.onclick = function() { 
        if (oDiv.className === 'div1') { 
         oDiv.className = 'toGreen'; 
         oBtn1.value = 'to Red'; 

        } else { 
         oDiv.className = 'div1'; 
         oBtn1.value = 'To Green'; 
        } 
};

來源

2014-10-04 15:36:59 tvanfosson

謝謝！我發現，太當我oDiv.className取代它，但我想我用VAR sDivClass = oDiv.className這已經聲明瞭一個全局變量？對不起真的新手在這裏。 – Serene 2014-10-04 15:44:10

@Serene'VAR sDivClass = oDiv.className;'只是一個className字符串的副本，後續變化不會影響實際的div className屬性，它只是值，而不是引用。 – dfsq 2014-10-04 15:47:05

@dfsq謝謝！現在我懂了！ – Serene 2014-10-08 17:46:13

在代碼中有兩個問題。首先是你並沒有真正地將新的類名分配給div。第二個是，如果類名是div1新類應該成爲div1 toGreen，不只是toGreen（這樣做的div仍然有基本樣式從div1類）。固定碼：

window.onload = function() { 
    var oBtn1 = document.getElementById('btn1'); 
    var oDiv = document.getElementById('div1'); 

    oBtn1.onclick = function() { 
     if (oDiv.className == 'div1') { 
      oDiv.className = 'div1 toGreen'; 
      oBtn1.value = 'to Red'; 
     } else { 
      oDiv.className = 'div1'; 
      oBtn1.value = 'To Green'; 
     } 
    } 
};

來源

2014-10-04 15:42:26 dfsq

的JavaScript：無法改變div的背景顏色，當一個按鈕被點擊

回答

相關問題