jQuery 屬性與樣式(四)

透過動態改變類別名稱(class),可以讓其修改元素呈現不同的效果。在HTML結構中裡,多個class以空格分隔,當一個節點(或稱為一個標籤)含有多個class時,DOM元素回應的className屬性所取得的不是class名稱的數組,而是一個含有空格的字串,這就使得多class操作變得很麻煩。同樣的jQuery開發者也考慮到這種情況,增加了一個.addClass()方法,用於動態增加class類別名稱

addClass( className )方法

看下面程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
        div{
            width:200px;
            height:200px;
        }
        .bg{
            background:red;
        }
    </style>
</head>
<body>
    <div id="div">php 中文网</div>

    <script type="text/javascript">
        $("#div").addClass('bg');
    </script>
</body>
</html>


#removeClass() 刪除樣式

#如下案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
        .div{
            width:200px;
            height:200px;
            background:red;
        }
    </style>
</head>
<body>
    <div class="div">php 中文网</div>

    <script type="text/javascript">
        $(".div").removeClass("div");
    </script>
</body>
</html>

如上程式碼,這樣我們的div的樣式就被刪除了


#
繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style type="text/css"> div{ width:200px; height:200px; } .bg{ background:red; } </style> </head> <body> <div id="div">php 中文网</div> <script type="text/javascript"> $("#div").addClass('bg'); </script> </body> </html>