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

最新推荐文章于 2024-09-15 15:45:09 发布

约德尔蒙

最新推荐文章于 2024-09-15 15:45:09 发布

阅读量6.3k

点赞数

分类专栏： JQuery（以及源码解读）

本文链接：https://blog.csdn.net/gyq04551/article/details/53262566

版权

JQuery（以及源码解读）专栏收录该内容

23 篇文章 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>