当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery 添加/移除CSS类实现代码

Javascript
JQuery的ajax基础上的超强GridView展示
js表格分页实现代码
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Tab页界面,用jQuery及Ajax技术实现
用jQuery技术实现Tab页界面之二
通过JS 获取Mouse Position(鼠标坐标)的代码
javascript 必知必会之closure
jquery ajax 登录验证实现代码
jQuery 使用手册(一)
jQuery 使用手册(二)
jQuery 使用手册(三)
jQuery 使用手册(五)
用Javascript 获取页面元素的位置的代码
网页自动跳转代码收集
JS 连锁泡泡 v1.1
javascript的onchange事件与jQuery的change()方法比较
jquery 模式对话框终极版实现代码
javascript 页面划词搜索JS
javascript String split方法误操作
一个JS小玩意 几个属性相加不能超过一个特定值.

Javascript 中的 jQuery 添加/移除CSS类实现代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-02-27   浏览: 197 ::
收藏到网摘: n/a

在网页设计中,我们常常要使用Javascript来改变页面元素的样式。 其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的;而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁!”
1. addClass() - 添加CSS类
复制代码 代码如下:

$("#target").addClass("newClass");
//#target 指的是需要添加样式的元素的ID
//newClass 指的是CSS类的名称

2. removeClass() - 移除CSS类
复制代码 代码如下:

$("#target").removeClass("oldClass");
//#target 指的是需要移除CSS类的元素的ID
//oldClass 指的是CSS类的名称

3. toggleClass() - 添加或者移除CSS类:如果CSS类已经存在,它将被移除;相反,如果CSS类不存在,它将被加上。
复制代码 代码如下:

$("#target").toggleClass("newClass")
//如果ID为“target”的元素已经定义了CSS样式,它将被移除;
//反之,CSS类”newClass“将被赋给该ID。

4.hasClass("className") - 判断是否已经存在CSS

在实际运用中,我们常常先定义好这些CSS类,然后通过Javascript事件触发(比如点击某个链接)来改变页面元素样式。此外,jQuery还提供一种方法 hasClass("className"),用来判断某个元素是否已经被赋予某个CSS类。