码迷,mamicode.com
首页 > Web开发 > 详细

jQuery-获取并设置CSS

时间:2018-10-25 22:11:22      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:测试   title   ack   btn   har   add   button   html   ext   

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

标签:测试   title   ack   btn   har   add   button   html   ext   

原文地址:https://www.cnblogs.com/xianya/p/9853140.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!