jQuery中元素类样式的设置和移除[网页开关灯]_样式定时移除怎么设置-CSDN博客

本文链接：https://blog.csdn.net/dwjdj/article/details/105917968

- 为元素设置类样式addClass(“类样式的名字”)
- 为元素移除类样式removeClass(“类样式的名字”)
- 判断元素是否有该类样式hasClass(“类样式的名字”)
- addClass()方法,括号里什么也没有,返回来的仍然是这个对象,即使在括号中设置了内容,返回来的还是这个对象
- removeClass()方法,同上
- css方法不能够添加或者移除类样式的[$("#dv").css(“class”,“cls”);]
- 总结:设置元素的样式可以使用css()方法，也可以使用addClass()或者是removeClass()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .w{
            border: 5px solid black;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        $(function () {
            //元素类样式的设置
            // $("#btn").click(function () {
            //     //$("#dv").addClass("cls");
            //     //$("#dv").addClass("cls").addClass("w");
            //     $("#dv").addClass("cls w");
            // });

            //元素类样式的移除
            $("#btn").click(function () {
                // $("#dv").removeClass("cls").removeClass("w");
                // $("#dv").removeClass("cls w");
                //console.log($("#dv").removeClass(""));
                console.log($("#dv").hasClass("cls w"));//布尔类型的值
            });
        });
    </script>
</head>
<body>
<input type="button" value="点击" id="btn"/>
<div id="dv" class="cls w"></div>
</body>
</html>

案例之网页开关灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.12.1.js"></script>
    <style>
        .cls{
            background-color: black;
        }
    </style>
    <script>
    $("#btn").click(function () {
        //判断body标签是否应用了cls类样式
        if ($("body").hasClass("cls")){
            $("body").removeClass("cls");
            $("#btn").val("关灯");
        }else{
            $("body").addClass("cls");
            $("#btn").val("开灯");
        }
    });
   </script>
    <script>
    
        $(function () {
            $("#btn").click(function () {
                //切换类样式
                $("body").toggleClass("cls");
            });
        });
    </script>
</head>
<body>
<input type="button" value="开/关灯" id="btn">
</body>
</html>