单击 JavaScript 更改按钮颜色答案

【问题标题】：Changing button color on click JavaScript单击 JavaScript 更改按钮颜色
【发布时间】：2018-02-08 02:26:27
【问题描述】：

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 中工作，但改变颜色不起作用。有人可以建议我，我做错了什么请

【问题讨论】：

当您使用 AngularJS 时，最好使用 Angular 方式。见my answer。

标签： javascript html css angularjs

【解决方案1】：

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;
}

&lt;button class="md-fab togglebtn"&gt;hello&lt;/button&gt;

【讨论】：

这工作正常，但我的按钮改变了宽度
给一些固定的宽度..它会解决你的问题，删除宽度：自动激活

【解决方案2】：

这只是一个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;
}

&lt;button class="md-fab togglebtn"&gt;hello&lt;/button&gt;

【讨论】：

这就是我正在做的，但我无法改变颜色
不，另外我为button.togglebtn和button.togglebtn.active添加了css

【解决方案3】：

当您使用 AngularJS 时，我建议您使用 ng-class 而不是普通的 JavaScript：

var myApp = angular.module('myApp', []);

.active { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
    <button ng-class="{active: isActive}" ng-click="isActive =! isActive">Hello</button>
</div>

【讨论】：

我尝试创建 ng-class 并在 ng click 上设置它，但它无法正常运行。我在 ng-click 上还有另一个功能

【解决方案4】：

     .md-button.md-fab {
      line-height: 1% !important;
      min-width: 0;
      border-radius: 50%;
      position: fixed;
      margin-left: 400px;
      background-color: green;
      margin-top: -7px;
      }
      button.togglebtn:after {
        color: white;
        width: auto;
        margin-left: 5px;
        border: none;
        content:'open';
        font-size: 10px;

    }

button.togglebtn.active:after {
    width: auto;
    color: black;
    content:'close';
    font-size: 10px;
}

.md-button.md-fab {
    background-color: black !important;
}
.md-button.md-fab.active{
    background-color: yellow !important;
    content: 'yellow';
    color: white;
}

【讨论】：