监听点击事件更改按钮样式

最新推荐文章于 2024-09-11 14:06:14 发布

蓝色的simon

最新推荐文章于 2024-09-11 14:06:14 发布

阅读量498

点赞数 1

分类专栏：前端文章标签： javascript 前端 html html5

本文链接：https://blog.csdn.net/qq_45135600/article/details/127058111

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

监听点击事件，根据id获取class，更改按钮默认样式
document.getElementById(“list_delete”).className = “sybutton”;

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.6/css/layui.css" media="all">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<title>Title</title>
<style>
     .sybutton {
        border-radius:10px 10px 10px 10px;
        background-color:#428BCA;
        border: none;
        color: white;
        padding: 5px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 15px;
        margin: 4px 2px;
        cursor: pointer;
     }
</style>

</head>
<body>
    <input  id="quantity_modify" type="button" class="sybutton" value="点击" style="display: inline;float: right; width: 125px;text-align:center;" onclick="quantity_modify()">
    <input  id="list_delete" type="button" class="sybutton" value="链接删除" style="display: inline;float: right; width: 125px;text-align:center;" onclick="list_delete()">

</body>

<script>
    var btn_disabled_style = "layui-btn layui-btn-disabled layui-btn-radius";
    // 监听点击事件, 修改样式
    document.addEventListener("click", layui_btn_disabled);
    function layui_btn_disabled() {
        if (document.getElementById("list_delete").className !== btn_disabled_style){
            document.getElementById("list_delete").className = btn_disabled_style; //链接删除按钮禁用样式
        }else{
            document.getElementById("list_delete").className = "sybutton"; //禁用修改为启用
        }
    }
</script>

</html>