javascript - 单击 JavaScript 更改按钮颜色

标签 javascript html css angularjs

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/

相关文章:

javascript - 多场景表单 Action (后台、多 Action 、定时器)

javascript - 如何在ejs中使用带有字符串的if语句?

javascript - 可拖动的屏幕左侧(JQuery)

javascript - 使用routeParams时,在一个页面上使用多个 Controller ?

javascript - 将文本添加到 onKeyPress react.js 的文本输入中

css - 当存在继承类时,您可以使用 CSS 定位元素吗?

javascript - PrimeFaces:使用 InputNumber 将 Excel 表格粘贴到 DataTable

html - 可以将 <div> 放在 <a> 中吗

css - 使用 :nth-child() 很难定位 <img>

c# - 如何解析这段HTML?