的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;
}
答
你只改变局部变量的值,而不是与DIV关联类。尝试
oBtn1.onclick = function() {
if (oDiv.className === 'div1') {
oDiv.className = 'toGreen';
oBtn1.value = 'to Red';
} else {
oDiv.className = 'div1';
oBtn1.value = 'To Green';
}
};
答
在代码中有两个问题。首先是你并没有真正地将新的类名分配给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';
}
}
};
谢谢!我发现,太当我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