jquery的样式操作，类操作（添加删除 css）

刺骨的言语ヽ痛彻心扉 2022-07-14 00:40 230阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background-color: pink;
            }
            .current {
                background-color: red;
            }
        </style>
        <script src = jquery-1.11.1.js></script>
        <script>
            $(function () {
    
    //-------------------------------样式操作方法--------------------------------
                
                //样式操作方法1(设置样式)：  css(json);
    //            $("div").css({"width":100,"height":100,"background-color":"pink"});
    
                //样式操作方法2(设置样式)：  css(属性，值);
                $("div").css("background-color","red");
    
                //样式操作方法2(获取样式)：  css(属性);
                //获取的时候如果有很多，那么获取jquery对象中的第一个
                alert($("div").css("width"));
    
    
    //------------------类操作添加和删除、切换、判断----------------------------------
                $("button").eq(0).click(function () {
                    //添加类
                    $("div").addClass("current");
                    //判断类
                    alert($("div").hasClass("current"));//has是have的单三 返回bool类型
                });
    
                $("button").eq(1).click(function () {
                    //删除类
                    $("div").removeClass("current");
                    //判断类
                    alert($("div").hasClass("current"));//has是have的单三
                });
                //alert($("div").hasClass("current"));
                // jquery对象中有一个带有类名的也是true，所有都不带才是false；
            })
    
        </script>
    </head>
    <body>
        <button>添加</button>
        <button>删除</button>
        <div></div>
        <div></div>
        <div></div>
        <div class="current"></div>
    </body>
    </html>