添加删除属性(jquery)

最新推荐文章于 2024-08-24 02:22:10 发布

爱敲代码的斯蒂芬

最新推荐文章于 2024-08-24 02:22:10 发布

阅读量550

点赞数

文章标签： jquery html javascript

本文链接：https://blog.csdn.net/weixin_71439967/article/details/126310778

版权

addClass() 方法向被选元素添加一个或多个类。

removeClass() 方法从被选元素移除一个或多个类。

hasClass() 方法检查被选元素是否包含指定的类名称。

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

代码块:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
        $(function() {

            $("button:eq(0)").click(function() {
                //addClass():添加class
                $(".div div").addClass("aa");
            })
            $("button:eq(1)").click(function() {
                $(".div div").addClass("bb");
            })
            $("button:eq(2)").click(function() {
                //removeClass():清除class
                $(".div div").removeClass("aa");
                //$(".div div").removeClass(); 清除所有class
            })
            $("button:eq(3)").click(function() {
                //hasClass():判断是否有class返回布尔值
                alert($(".div div").hasClass("aa"));
            })
            $("button:eq(4)").click(function() {
                //toggleClass():判断是否存在 存在溢出 不存在添加
                $(".div div").toggleClass("bb");
            })
        })
    </script>
    <style>
        .div {
            width: 650px;
            display: flex;
            justify-content: space-between;
        }
        
        .div div {
            width: 150px;
            height: 150px;
            border: 1px solid #000;
        }
        
        .aa {
            background-color: red;
            font-weight: bold;
        }
        
        .bb {
            color: #fff;
        }
    </style>
</head>

<body>
    <button>添加class:aa</button>
    <button>添加class:bb</button>
    <button>清除class:aa</button>
    <button>判断是否有class:bb</button>
    <button>切换class:bb</button>
    <div class="div">
        <div>哈哈哈</div>
        <div>哈哈哈</div>
        <div>哈哈哈</div>
        <div>哈哈哈</div>
    </div>
</body>

</html>

运行效果: