jq：样式操作（返回css样式属性的值、修改属性的值、设置样式的方法）

转载

mb5ff98083d7c62 2020-08-03 11:29:00

文章标签 html jquery ajax css css样式 文章分类 代码人生

1、操作css样式

（1）返回css样式属性的值

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div {
                width: 300px;
                height: 300px;
                background-color: darkred;
            }
        </style>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    </head>

    <body>
        <div></div>
        <script>
            $(function() {
                console.log($("div").css("width"));
            })
        </script>
    </body>

</html>

jq：样式操作（返回css样式属性的值、修改属性的值、设置样式的方法）_html

只写了css的属性名的情况下只返回属性值

（2）修改属性的值

<body>
        <div></div>
        <script>
            $(function() {
                $("div").css("width","100px");
                console.log($("div").css("width"));
            })
        </script>
    </body>

jq：样式操作（返回css样式属性的值、修改属性的值、设置样式的方法）_css样式_02

属性名必须加引号，不加引号会当做变量处理
属性的值如果是数字可以不加引号

（3）一次修改多个css的样式（对象的方式）

<body>
        <div></div>
        <script>
            $(function() {
                $("div").css({
                    width:200,
                    height:200
                })
            })
        </script>
    </body>

jq：样式操作（返回css样式属性的值、修改属性的值、设置样式的方法）_ajax_03

2、设置样式的方法

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

（1）添加类

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div {
                width: 300px;
                height: 300px;    
            }
            .back_color{
                background-color: darkred;
            }
        </style>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    </head>

    <body>
        <div></div>
        <script>
            $(function() {
                $("div").click(function(){
                    $(this).addClass("back_color");
                })
            })
        </script>
    </body>

</html>

（2）删除类

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div {
                width: 300px;
                height: 300px;    
                background-color: aqua;
            }
            .back_color{
                background-color: darkred;
            }
        </style>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    </head>

    <body>
        <div class="back_color"></div>
        <script>
            $(function() {
                $("div").click(function(){
                    $(this).removeClass("back_color");
                })
            })
        </script>
    </body>

</html>

（3）切换类

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div {
                width: 300px;
                height: 300px;    
                background-color: aqua;
            }
            .back_color{
                background-color: darkred;
            }
        </style>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    </head>

    <body>
        <div class="back_color"></div>
        <script>
            $(function() {
                $("div").click(function(){
                    $(this).toggleClass("back_color");
                })
            })
        </script>
    </body>

</html>