jQuery对元素的CSS样式操作(通过修改CSS类实现)

1.定义和用法:

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

  注意:使用addClass()方式添加CSS类时,并不会删除先有的CSS类。同时,在使用以上方法时,其class参数都可以设置多个类名,类名与类名之间用空格分开

  示例:

<body> <script type="text/javascript"> //入口函数 $(document).ready(function(){ // 添加CSS样式 $("div").addClass("box") }) </script> <div></div></body>

style.css代码:

.box{ width: 100px; height: 100px; background-color: aqua;}

  输出:

 

 

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

  示例:

<body> <script type="text/javascript"> //入口函数 $(document).ready(function(){ // 添加CSS样式 $("div").addClass("box") // 删除CSS样式 $("div").removeClass("box") }) </script> <div></div></body>

 

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

  示例:

<body> <script type="text/javascript"> //入口函数 $(document).ready(function(){ // 添加CSS样式 $("div").addClass("box") // 删除CSS样式 $("div").removeClass("box") //智能增减CSS样式 $("div").toggleClass("box") }) </script> <div></div></body>

 

相关文章