我是JavaScript的新手,我试图通过改变它的类来获得一个改变元素背景颜色的按钮。 我从几个不同的来源组合js,但它不起作用,我无法弄清楚为什么。 function myFunc() { var y = document.getElementById("bg-change1 ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
我试图使用JS来更改页面的颜色主题,方法是单击一个按钮,然后再次单击以将其更改回(即切换)。 到目前为止,这是我的JS代码:
var i = 0;
function changeColor() {
if (i%2 == 0) {
switchBlue();
} else {
switchGreen();
}
i++;
}
function switchBlue() {
document.getElementById('color-wrap-01').style.backgroundColor = "#07184a";
document.getElementById('color-wrap-02').style.backgroundColor = "#006385";
document.getElementById('color-wrap-03').style.backgroundColor = "#82baba";
document.getElementById('color-wrap-04').style.backgroundColor = "#082644";
document.getElementById('box').style.backgroundColor = "#d0dddd";
document.getElementById('vl-01').style.borderLeft = "4px solid blue";
document.getElementById('vl-02').style.borderLeft = "4px solid blue";
var footerText = document.getElementsByClassName('footer-text');
for (i = 0; i < 3; i++) {
footerText[i].style.color = "#8eb7ba";
}
var headerText = document.getElementsByClassName('header-text');
for (i = 0; i < 4; i++) {
headerText[i].style.color = "#81babd";
}
var subTitle = document.getElementsByClassName('sub-title');
for (i = 0; i < 11; i++) {
subTitle[i].style.color = "#008688";
}
}
function switchGreen() {
document.getElementById('color-wrap-01').style.backgroundColor = "#074946";
document.getElementById('color-wrap-02').style.backgroundColor = "#00865F";
document.getElementById('color-wrap-03').style.backgroundColor = "#81BA88";
document.getElementById('color-wrap-04').style.backgroundColor = "#084330";
document.getElementById('box').style.backgroundColor = "#D7DDD0";
document.getElementById('vl-01').style.borderLeft = "4px solid green";
document.getElementById('vl-02').style.borderLeft = "4px solid green";
var footerText = document.getElementsByClassName('footer-text');
for (i = 0; i < 3; i++) {
footerText[i].style.color = "green";
}
var headerText = document.getElementsByClassName('header-text');
for (i = 0; i < 4; i++) {
headerText[i].style.color = "green";
}
var subTitle = document.getElementsByClassName('sub-title');
for (i = 0; i < 11; i++) {
subTitle[i].style.color = "green";
}
}
与此HTML:
<div id="color-wrap-01">
<div class="container">
<div class="row top-header">
<div class="col-sm-6">
<p align="left">Welcome, Guest <a href="https://www.google.ca/">Login</a> <a href="https://www.google.ca/">Sign Up</a></p>
</div>
<div class="col-sm-6">
<p align="right">Stay Updated: <a href="https://www.google.ca/">Subscribe via RSS</a> <a href="https://www.google.ca/">Email Updates</a></p>
</div>
</div>
</div>
和这个按钮:
<button onclick="changeColor()">COLOUR</button>
第一个颜色更改有效,但此后该按钮不会切换回绿色。 任何帮助表示赞赏!
如果您实际上要在两种颜色之间切换,可以执行以下操作:
var colorSwitch = '';
function changeColor() {
if (colorSwitch === '') {
switchBlue();
colorSwitch = 'blue';
} else {
switchGreen();
colorSwitch = '';
}
}
那只是一个想法,但是您可能不需要迭代器。 您可以在这里进行测试: https : //jsfiddle.net/qwu41fno/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.