在网页设计中,我们常常要使用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。

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

如何添加/移除CSS类的更多相关文章

  1. jQuery添加/改变/移除CSS类

    转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...

  2. JQ添加移除css样式

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

  3. JQ添加移除css样式--转载 心存善念

    我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性 ...

  4. js动态给当前点击元素添加css类

    1.页面:

  5. js活jQuery实现动态添加、移除css/js文件

    下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...

  6. 脚本化CSS类-HTML5 classList属性

    HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...

  7. JQuery:JQuery操作CSS类

    JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...

  8. Jquery添加移除样式

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: var p_class = $("p ...

  9. jQuery 学习03——HTML:捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸

    jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...

随机推荐

  1. [51nod1058]求N!的长度

    法1:stirling公式近似 $n! \approx \sqrt {2\pi n} {(\frac{n}{e})^n}$ (如果怕n不够大下式不成立,可以当数小于10000时用for求阶层) 也可以 ...

  2. [计数问题dp]子数列的个数

    http://www.51nod.com/tutorial/course.html#!courseId=15 解题关键:主要是一种思想 $dp[i] = dp[i - 1]*2$ 如果a[i]不在之前 ...

  3. UGUI解决嵌套使用多个ScrollRect时的Drag拖动冲突问题

    很简单,直接看代码: using UnityEngine.UI; using UnityEngine.EventSystems; using UnityEngine; /// <summary& ...

  4. 杭电acm 1033题

    Problem Description For products that are wrapped in small packings it is necessary that the sheet o ...

  5. 5.5 Ubuntu无法访问windows上的文件

    比如,我的文件都放在win10桌面上的Tools文件夹中,那么在Ubuntu中访问如下:当然,sunny在点击这个磁盘时,遇到了没有访问权限的问题. 解决方案:参考网址http://blog.csdn ...

  6. MIC-3395单板机不识别PCI设备

    硬件环境: 单板机:MIC-3395 外设设备:自研的DSP6678板卡 现象: MIC-3395单板机不能识别DSP6678板卡,但是在MIC-3392上能够正常识别,排查若干问题后,升级3395的 ...

  7. The project was not built since its build path is incomplete. Cannot find the class file for java.lang.Object

    The project was not built since its build path is incomplete. Cannot find the class file for java.la ...

  8. hdu1074

    #include <iostream> #include <string> #include <cstring> #include <stack> #i ...

  9. 在虚拟机环境(CentOS7系统)下将kubernetes中部署服务成功,但在虚拟机外部无法访问到服务

    在CentOS7环境下,kubernetes单机版环境,成功部署一个服务,在虚拟机中访问服务没问题,下面这样: curl http://172.27.73.26:8888/eureka-server/ ...

  10. 【TMF eTOM】业务流程框架介绍

    TMF文档版权信息 Copyright © TeleManagement Forum 2013. All Rights Reserved. This document and translations ...