【jQuery】常用API——jQuery样式操作-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51481135/article/details/128592729

一、操作 css 方法

jQuery 可以使用 css 方法来修改简单元素样式。

1. 参数只写属性名，则是返回属性值

$(this).css(''color'');

2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css(''color'', ''red'');

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号

$(this).css({ "color":"white","font-size":"20px"});

    <script src="../jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 操作样式之css方法
        $(function () {
            // 1. 参数只写属性名，则是返回属性值
            // console.log($('div').css('width'));

            // 2. 参数是属性名，属性值，逗号分隔，是设置一组样式
            // $("div").css("width", "300px");
            // $("div").css(height, "300px"); 错误：属性名一定要加引号
            // $("div").css("width", 300); 值如果是数字可以不用跟单位和引号
            
            // 3. 参数可以是对象形式，方便设置多组样式
            $("div").css({
                // 属性名和属性值用冒号隔开， 属性可以不用加引号
                width: 400,
                height: 400,
                backgroundColor: "red"
                // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
            })
        })
    </script>
</body>

二、设置类样式方法

作用等同于以前的 classList，可以操作类样式，修改多个样式。注意操作类里面的参数不要加点。

1. 添加类

$('div').addClass('current');

2. 移除类

$('div').removeClass('current');

3. 切换类：如果没有类名，就添加；如果由类名，就删除

$('div').toggleClass('current');

    <style>
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
            /* 过渡效果 */
            transition: all 0.5s; 
        }
        .current {
            background-color: red;
            /* 旋转效果 */
            transform: rotate(360deg);
        }
    </style>
    <script src="../jquery.min.js"></script>
</head>

<body>
    <!-- 1.添加类 -->
    <!-- <div></div> -->、

    <!-- 2.删除类 -->
    <div class="current"></div>

    <script>
        $(function () {
            // 1. 添加类 addClass()
            // 单击div后由粉变红
            // $('div').click(function(){
            //     $(this).addClass('current');
            // });

            // 2. 删除类 removeClass()
            // 单击div后由红变粉
            // $('div').click(function(){
            //     $(this).removeClass('current');
            // });

            // 3. 切换类 toggleClass()
            // 如果没有类名，就添加；如果有类名，就删除
            $('div').click(function(){
                $(this).toggleClass('current');
            });
        })
    </script>
</body>

三、类操作与 className 区别

原生 JS 中 className 会覆盖元素原先里面的类名。

jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

    <style>
        .one {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all .3s;
        }

        .two {
            transform: rotate(720deg);
        }
    </style>
    <script src="../jquery.min.js"></script>
</head>

<body>
    <div class="one"></div>
    <script>
        // 原生 JS 中 className 会覆盖元素原先里面的类名。
        // var one = document.querySelector(".one"); // 获取
        // one.className = "two"; // 覆盖

        // jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
        $(".one").addClass("two");  // 这个addClass相当于追加类名 不影响以前的类名
        // $(".one").removeClass("two");
    </script>
</body>