通过 jQuery,可以很容易地对 CSS 元素进行操作。 切换 CSS 类
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
下面的样式表将用于本页的所有例子:
下面的例子展示如何向不同的元素添加 class 属性。当然,在添加类时,您也可以选取多个元素:
您也可以在 addClass() 方法中规定多个类:
下面的例子演示如何在不同的元素中删除指定的 class 属性:
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); }); }); </script> <style type="text/css"> .blue { color:blue; } </style> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Toggle class</button> </body> </html>