jQuery-获取并设置CSS

jQuery 拥有若干进行 CSS 操作的方法：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

addClass() 向被选元素添加一个或多个类

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#btn").click(function() {
                    $("p").addClass("addcss");
                });                
            });
        </script>
        <style>
            .addcss{
                color: #FF0000;
            }
        </style>
    </head>

    <body>
        <p>测试追加样式</p>
        <button id="btn">追加样式</button>
    </body>

</html>

removeClass() 从被选元素删除一个或多个类

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <style>
            .removecss {
                color: #FF0000;
                font-weight: bold;
            }
        </style>
        <script>
            $(document).ready(function() {
                    $("button").click(function() {
                        $("p").removeClass("removecss");
                    });
            });
        </script>
    </head>

    <body>
        <p class="removecss">测试追加样式</p>
        <button>移除样式</button>
    </body>
</html>

toggleClass() 对被选元素进行添加/删除类的切换操作

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <style>
            .togglecss {
                color: #FF0000;
                font-weight: bold;
            }
        </style>
        <script>
            $(document).ready(function() {
                    $("button").click(function() {
                        $("p").toggleClass("togglecss");
                    });
            });
        </script>
    </head>

    <body>
        <p class="togglecss">测试追加样式</p>
        <button>切换样式</button>
    </body>
</html>

css() 设置或返回样式属性

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                    $("button").click(function() {
                        $("p").css({"color":"blue","font-size":"200%"});
                        alert($("p").css("color"));
                    });
            });
        </script>
    </head>

    <body>
        <p style="color: #FF0000;">测试追加样式</p>
        <button>设置返回样式</button>
    </body>
</html>

jQuery-获取并设置CSS

猜你喜欢