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>
提交重置代码