样式操作

链式编程

链式编程是为了节省代码量，看起来更优雅。

使用链式编程一定注意是哪个对象执行样式

css样式操作：

jQuery可以使用css方法来修改简单元素样式;也可以操作类，修改多个样式。

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

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

代码示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>14-jQuery操作样式之css方法</title>
    <script src="/js文件/jQuery.mini.js"></script>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .current {
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

<script type="text/javascript">
    //操作样式之css方法
    $(function () {
        console.log($("div").css("width"));
        // $("div").css("width",300)
        // $("div").css(height,"300px")属性名一定要加引号
        $("div").css({
            width: 400,
            height: 400,
            backgroundColor: "red",
            //如果是复合属性则必须采用驼峰命名法，如果值不是数字，则需要加引号
        })
    })
</script>

</html>

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

设置类样式方法：

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

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>15-jQuery操作样式之类操作</title>
        <style type="text/css">
            div {
                width: 150px;
                height: 150px;
                background-color: pink;
                margin: 100px auto;
                transition: all 0.5s;
            }

            .current {
                background-color: red;
                transform: rotate(360deg);
            }
        </style>
    </head>
    <script src="jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
    <body>
        <div class="current"></div>
    </body>

    <script type="text/javascript">
        $(function() {
            //1.添加类 addClass()
            // $("div").click(function() {
            //     //$(this).addClass("current");
            // })
            //2.删除类 removeClass()
            // $("div").click(function() {
            //     $(this).removeClass("current");
            // })
            //3．切换类toggleclass()
            $("div").click(function() {
                $(this).toggleClass("current");
            })
        })
    </script>
</html>

 

posted @ 2022-04-17 21:22  今天穿秋裤了吗  阅读(39)  评论(0)    收藏  举报