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 中工作，但更改颜色不起作用。有人可以建议我吗，我做错了什么
它只是一个 CSS 问题，您正在尝试设置样式，after但您需要分别设置按钮样式和之后的样式：
var acc = document.getElementsByClassName("togglebtn"),
i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
}
}button.togglebtn:after {
content: '';
}
button.togglebtn.active:after {
content: 'close';
}
button.togglebtn {
background-color: white;
width: auto;
font-weight: bold;
margin-left: 5px;
border: none;
}
button.togglebtn.active {
width: auto;
background-color: green;
content: ' close';
font-size: 10px;
}<button class="md-fab togglebtn">hello</button>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句