jQuery 修改样式

最新推荐文章于 2024-02-11 13:06:15 发布

云果龙

最新推荐文章于 2024-02-11 13:06:15 发布

阅读量1.3k

点赞数 1

分类专栏：前端基础文章标签： jquery

本文链接：https://blog.youkuaiyun.com/weixin_45129218/article/details/115354313

版权

前端基础专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用jQuery修改元素的样式属性以及如何通过设置类来改变样式。内容包括基本的样式属性修改方法和类的添加、移除技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改样式属性

<!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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>

<body>
    <div></div>
    <script>
        // 操作样式之css
        $(function () {
            // 参数只写属性名,返回属性值 返回200px
            console.log($('div').css("width"));

            //1.修改单个属性
            // 属性名要加引号
            //$('div').css("width", "300px");

            //2.修改多个属性
            //以对象的形式做修改,数字可以不加引号,不是数字需要加引号.属性采用驼峰命名法
            $('div').css({ width: 400, height: 400, backgroundColor: "red" });
        })
    </script>
</body>

</html>

设置类方式

<!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="./jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transition: all 0.5s;
        }

        .red {
            background-color: red;
        }

        .circle {
            border-radius: 60px;
        }

        .current {
            transform: rotate(70deg);
        }
    </style>
</head>

<body>
    <div class="circle">1</div>
    <script>
        $(function () {
            //1.添加类addClass()
            $('div').click(function () {
                $(this).addClass("red");
            })

            //2.删除类
            $("div").mouseover(function () {
                $(this).removeClass("circle");
            })

            //3.切换类 有则删除,没则添加
            $("div").click(function () {
                $(this).toggleClass("current");
            })
        })
    </script>
</body>

</html>