的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的背景颜色，当一个按钮被点击

回答

相关问题