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

jQuery对元素的CSS样式操作(通过修改CSS类实现)

时间:2020-05-09 23:40:57      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:指定   fun   image   dcl   输出   样式   就删除   java   query   

1.定义和用法:

  addClass(class):为所有匹配的元素添加指定的CSS类名

  注意:使用addClass()方式添加CSS类时,并不会删除先有的CSS类。同时,在使用以上方法时,其class参数都可以设置多个类名,类名与类名之间用空格分开

  示例:

<body>
    <script type="text/javascript">
        //入口函数
        $(document).ready(function(){
            // 添加CSS样式
            $("div").addClass("box")
        })
    </script>
    <div></div>
</body>

style.css代码:

.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
}

  输出:

技术图片

 

 

  removeClass(class):从所有匹配的元素中删除全部或者指定的CSS类

  示例:

<body>
    <script type="text/javascript">
        //入口函数
        $(document).ready(function(){
            // 添加CSS样式
            $("div").addClass("box")
            // 删除CSS样式
            $("div").removeClass("box")
        })
    </script>
    <div></div>
</body>

 

  toggleClass(class):如果存在就删除一个CSS类,如果不存在就添加一个CSS类

  示例:

<body>
    <script type="text/javascript">
        //入口函数
        $(document).ready(function(){
            // 添加CSS样式
            $("div").addClass("box")
            // 删除CSS样式
            $("div").removeClass("box")
            //智能增减CSS样式
            $("div").toggleClass("box")
        })
    </script>
    <div></div>
</body>

 

jQuery对元素的CSS样式操作(通过修改CSS类实现)

标签:指定   fun   image   dcl   输出   样式   就删除   java   query   

原文地址:https://www.cnblogs.com/abner-pan/p/12860458.html

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