夺命雷公狗jquery---12Class属性操作 

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <style src="text/css">
            div{
                width:300px;
                height:800px;
                border:1px solid red;
            }

            .cs1{
                border:1px solid yellow;
            }
            
            .cs2{
                font-size:14px;
                font-weight:bold;
                color:red;
            }

            .cs3{
                background-color:blue;
            }
        </style>
        <script src="js/jquery.js"></script>
        <script>
            window.onload = function(){
                $('#btnok')[0].onclick = function(){
                    //1.为元素添加class样式
                    //$('div').addClass('cs3');
                    
                    //2,为元素添加多个class样式
                    //$('div').addClass('cs1 cs2 cs3');
                    
                    //3.移除样式
                    //$('div').removeClass('cs3');

                    //4.切换显示class样式
                    //$('div').toggleClass('cs2');
                    
                    //5.判断元素是否具有指定的class属性
                    if($('div').hasClass('cs3')){
                        $('div').removeClass('cs3');
                    }else{
                        $('div').addClass('css2');
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="button" id="btnok" value="class属性设置" />
        <hr />
        <div class="cs3">夺命雷公狗使用的是目前最多人使用的jquery代码库</div>
    </body>
</html>

 

posted @ 2015-10-25 11:16  夺命雷公狗  阅读(152)  评论(0)    收藏  举报