好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

jQuery 获取并设置 CSS 类

$(document).ready(function(){ $("#btnEx").click(function(){ $("#test").toggleClass("important"); }); }); .important { font-size:x-large; font-weight:bold; color:#c3c3c3; }

jQuery - 获取并设置 CSS 类

通过 jQuery,可以很容易地对 CSS 元素进行操作。 切换 CSS 类

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:

addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性

实例样式表

下面的样式表将用于本页的所有例子:

.important { font-weight: bold ; font-size: xx-large ; } .blue { color: blue ; }


jQuery addClass() 方法

下面的例子展示如何向不同的元素添加 class 属性。当然,在添加类时,您也可以选取多个元素:

实例

$ ( " button " ) . click ( function ( ) { $ ( " h1,h2,p " ) . addClass ( " blue " ) ; $ ( " div " ) . addClass ( " important " ) ; } ) ;


尝试一下 »

您也可以在 addClass() 方法中规定多个类:

实例

$ ( " button " ) . click ( function ( ) { $ ( " body div:first " ) . addClass ( " important blue " ) ; } ) ;


尝试一下 »


jQuery removeClass() 方法

下面的例子演示如何在不同的元素中删除指定的 class 属性:

实例

$ ( " button " ) . click ( function ( ) { $ ( " h1,h2,p " ) . removeClass ( " blue " ) ; } ) ;


尝试一下 »


jQuery toggleClass() 方法

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:

实例

$ ( " button " ) . click ( function ( ) { $ ( " h1,h2,p " ) . toggleClass ( " blue " ) ; } ) ;


尝试一下 »


jQuery css() 方法

我们将在下一章讲解 jQuery css() 方法 。

查看更多关于jQuery 获取并设置 CSS 类的详细内容...

  阅读:26次

上一篇

下一篇

第1节:jQuery – AJAX get() 和 post() 方法    第2节:jQuery – AJAX load() 方法    第3节:jQuery Accordion    第4节:jQuery AJAX 方法    第5节:jQuery AJAX 简介    第6节:jQuery Autocomplete    第7节:jQuery css() 方法    第8节:jQuery Callback 方法    第9节:jQuery Cookie 插件    第10节:jQuery HTML / CSS 方法    第11节:jQuery noConflict() 方法    第12节:jQuery Growl 插件(消息提醒)    第13节:jQuery Password Validation(密码验证)    第14节:jQuery Prettydate    第15节:jQuery 遍历 – 祖先    第16节:jQuery 遍历    第17节:jQuery 尺寸    第18节:jQuery 获取并设置 CSS 类    第19节:jQuery 删除元素    第20节:jQuery 获取内容和属性    第21节:jQuery 教程    第22节:jQuery 安装    第23节:jQuery 简介    第24节:jQuery 链    第25节:jQuery 遍历 – 过滤    第26节:jQuery 遍历方法    第27节:jQuery Validate    第28节:jQuery 遍历 – 后代    第29节:jQuery 遍历 – 同胞(siblings)    第30节:jQuery Tooltip    第31节:jQuery 效果 – 停止动画    第32节:jQuery 添加元素    第33节:jQuery 设置内容和属性    第34节:jQuery 效果 – 动画    第35节:jQuery 效果 – 滑动    第36节:jQuery 效果 – 淡入淡出    第37节:jQuery 效果 – 隐藏和显示    第38节:jQuery 事件    第39节:jQuery 选择器    第40节:jQuery 语法    第41节:jQuery 属性    第42节:jQuery 效果方法    第43节:jQuery 事件方法    第44节:jQuery 实例    第45节:JSONP 教程    第46节:jQuery 杂项方法    第47节:jQuery 树型菜单插件(Treeview)