layui open更改按钮的颜色

1. layui中的按钮

在layui的UI组件中，按钮是一个常用的元素。我们可以使用以下代码创建一个常规的layui按钮。

  layui.use(['layer','form'], function(){
    var $ = layui.jquery,layer = layui.layer,form = layui.form;
    // 创建一个常规的按钮
    $('#btn').click(function(){
      layer.msg('Hello World !');
    });
  });

2.更改按钮的颜色

如果我们想更改按钮的颜色，可以通过自定义按钮类来实现。这里我们以更改按钮为红色为例。

  .layui-btn-red {
    background-color: #FF5722;
    border-color: #FF5722;
    color: #fff!important;
  }

此时我们就创建了一个名为layui-btn-red的自定义按钮类，我们可以在html中进行调用。

  自定义按钮

3.使用CSS伪类更改按钮颜色

我们也可以使用CSS伪类来更改按钮的颜色，这种方式额外使用CSS样式表，以避免污染HTML。

  /* 伪类样式表 */
  .layui-btn-red:hover, .layui-btn-red:focus {
    background-color: #FF5722!important;
    border-color: #FF5722!important;
  }

  
  自定义按钮

4.使用JS给按钮添加类名

我们也可以使用JS来给按钮添加类名，以实现更改按钮颜色的目的。下面这个例子通过JS监听按钮的点击事件，一旦点击，按钮就会变为红色。

  layui.use(['layer','form'], function(){
    var $ = layui.jquery,layer = layui.layer,form = layui.form;
    // JS更改按钮颜色
    $('#btn').click(function(){
      $(this).addClass("layui-btn-red");
    });
  });

  
  添加类名

以上是使用layui实现更改按钮颜色的几种方式，根据不同的需求选择不同的方法即可。