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