JS学习十九:jQuery增删改查class属性、css样式属性

一、增册改查 class属性

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

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

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

toggleClass(class, switch):如果switch参数为true,则加上对应的CSS类,否则就删除。

class参数,可以设置多个类名,类名与类名之间用空格分隔。

 示例:

        :div1
        <div id="box1">
        </div>
        <button id="btn">change</button>
        <script type="text/javascript">
            $("div").addClass("box1")
            $("div").removeClass("box1")
            var flag = false
            $("#btn").bind("click", function(){
//                 if (flag) {
//                     $("div").removeClass("box1")
//                     flag = flase
//                 } else {
//                     $("div").addClass("box1")
//                     flag = true
//                 }
                $("div").toggleClass("box1")
            })
        </script>

 

 

二、增删改查css属性

示例:

        <div id="box1">
        </div>
        <button id="btn">change</button>
        <script type="text/javascript">
            $("div").addClass("box1")
            $("div").removeClass("box1")
            var flag = false
            $("#btn").bind("click", function(){
                // 获取css的背景样式
                $("#box1").css("background-color")
                // 设置css的背景样式
                $("#box1").css("background-color", "yellow")
            })
        </script>

 

 

常用的设置:text,html,attr,css,addClass,removeClass

 

posted on 2018-12-09 14:22  myworldworld  阅读(478)  评论(0)    收藏  举报

导航