JavaScript:
var acc = document.getElementsByClassName("togglebtn"),
i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function () {
this.classList.toggle("active");
}
}
html:
<md-button class="md-fab togglebtn"></md-button>
CSS:
button.togglebtn:after {
background-color: white;
width: auto;
font-weight: bold;
margin-left: 5px;
border: none;
content:'';
}
button.togglebtn.active:after {
width: auto;
background-color: green;
content:'close';
font-size: 10px;
}
我只能更改文本的颜色,不能更改背景颜色。当有人点击按钮时,我试图改变颜色。 :after 在 css 中工作,但改变颜色不起作用。有人可以建议我吗,请问我做错了什么
最佳答案
var acc = document.getElementsByClassName("togglebtn");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
}
}
button.togglebtn.active {
background-color: green;
color: #fff;
}
<button class="md-fab togglebtn">hello</button>
关于javascript - 单击 JavaScript 更改按钮颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45959290/