jQuery_CSS类操作

时间：2019-12-03 17:32:43 阅读：87 评论：0 收藏：0 [点我收藏+]

下面讲述jQuery操作css类，进行类的添加，移除，以及前两项功能的结合操作。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>属性操作_CSS类</title>
        <style type="text/css">
            .divclass {
                color: red;
            }
            
            .div1 {
                background-color: yellow;
            }
            
            #div1 {
                border: 1px solid black;
                width: 400px;
                height: 250px;
                margin: auto;
            }
            
            #father {
                border: 1px solid white;
                width: 450px;
                height: 300px;
                margin: auto;
                text-align: center;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <script>
            /**
             * 需求：
             * 1.点击button，使一个div的背景颜色变为 黄色
             * 2.点击button，清空之前设置的背景颜色
             * 3.通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原
             */

            /**
             * 方法分析：
             *  1.addClass(class) 添加一个class属性
             *  2.removeClass([class]) 移除一个class属性
             *  3.toggleClass(class) 如果存在(不存在)就删除(添加)一个类
             */

            /**
             *代码实现 
             */
            $(function() {
                // 1.点击button，使一个div的背景颜色变为黄色
                $("#button1").click(function() {
                    $("#div1").addClass("div1");//添加div1类使背景变色
                });

                // 2.点击button，清空之前设置的背景颜色
                $("#button2").click(function() {
                    $("#div1").removeClass("div1");//点击去掉类的按钮以去掉类
                });

                // 3.通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原
                $("#button3").click(function() {
                    $("#div1").toggleClass("divclass");
//                     toggleClass相当于addClass和removeClass的结合，即点击一次为addClass再点击一次为removeClass
                });
            });
        </script>
    </head>

    <body>
        <div id="father">
            <div id="div1">AAAAAA</div><br />
            <input type="button" value="背景颜色变为黄色" id="button1" />
            <input type="button" value="背景颜色清空" id="button2" />
            <input type="button" value="字体颜色开关" id="button3" />
        </div>
    </body>

</html>