jQuery 添加/移除CSS类实现代码
作者:bea
其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的;而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁!” 1. addClass() - 添加CSS类 代码如下: $("#target").addClass("newClass"); //#target 指的
其中一种办法是改变页面元素的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类。
有用 | 无用
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类。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- javascript中的链式调用
- js删除select中重复项的实现代码
- JavaScript 题型问答有答案参考
- JavaScript 学习技巧
- JavaScript Timer实现代码
- 两个比较有用的Javascript工具函数代码
- 类似GMAIL的Ajax信息反馈显示
- JavaScript 10件让人费解的事情
- JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
- jQuery 处理表单元素的代码
- jQuery 树形结构的选择器
- jQuery 处理网页内容的实现代码
- JS getMonth()日期函数的值域是0-11
- Javascript 浏览器事件小结
- 不同浏览器对回车提交表单的处理办法
- Jquery iframe内部出滚动条
- jquery 问答知识整理
- 改善你的jQuery的25个步骤 千倍级效率提升
- jQuery 改变CSS样式基础代码