jQuery_CSS类操作

时间:2019-12-03
本文章向大家介绍 jQuery_CSS类操作,主要包括 jQuery_CSS类操作使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

下面讲述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>

运行结果:

刚开始:

 点击第一个按钮:

点击第二个按钮:

 点击第三个按钮两次:

原文地址:https://www.cnblogs.com/tkg1314/p/11978103.html