layui button(按钮)图标、颜色切换

最新推荐文章于 2024-08-05 22:33:52 发布

佳佳鸽

最新推荐文章于 2024-08-05 22:33:52 发布

阅读量7.7k

点赞数

分类专栏： LayUI JS 文章标签： layui button js button button图标切换 button颜色切换 button点击事件监听

本文链接：https://blog.csdn.net/weixin_43793181/article/details/123591065

版权

LayUI 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

本文介绍了如何使用 layui 框架实现按钮的图标和颜色的动态切换。通过点击按钮，按钮的图标从 layui-icon-pause（暂停）变为 layui-icon-play（播放），颜色从 layui-btn-danger（橙红色）变为 layui-btn（默认颜色）。同时，文章提供了 HTML 和 JavaScript 代码示例，展示了具体的实现逻辑。

摘要由CSDN通过智能技术生成

layui button(按钮)图标、颜色切换（节选）：

按钮默认图标、颜色效果：
在这里插入图片描述
按钮点击后图标、颜色效果：

html部分：

<button class="layui-btn layui-btn-danger" id="LAY-preview_enable-button-submit"><i id="preview_enable" class="layui-icon layui-icon-pause"></i></button>

JS部分：
监听按钮点击事件，通过preview_enable_button状态进行按钮图标、颜色的切换操作。

var preview_enable_button = 1;
$("#LAY-preview_enable-button-submit").click(function () {
    if (preview_enable_button == 1) {
        document.getElementById("preview_enable").className="layui-icon layui-icon-play";
        document.getElementById("LAY-preview_enable-button-submit").className="layui-btn";
        preview_enable_button = 0;

        my_function();
    }
    else {
        document.getElementById("preview_enable").className="layui-icon layui-icon-pause";
        document.getElementById("LAY-preview_enable-button-submit").className="layui-btn layui-btn-danger";
        preview_enable_button = 1;

        my_function();
    }
});