jQuery 修改样式

news/2024/7/10 23:31:04 标签: jquery

修改样式属性

<!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>

jQuery 修改样式

修改样式属性

设置类方式

相关文章

转：jquery选择器

【转】Oracle集合操作函数:union、intersect、minus

又爱又恨的BOOTSTRAP

windows下配置lamp环境(1)---安装Apache服务器2.2.25

反弹后劲比较大的两种股

XML 和 HTML 的区别

原生js通过prottype写的一个简单拖拽

谁看谁的脸色？