在网页设计中,我们常常要使用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. 使用py 和flask 实现的服务器系统目录浏览,日志文件实时显示到网页的功能

    看日志希望带有彩色,希望从浏览器上看到,不用连到机器上看. 浏览系统的文件夹,scan + 系统文件夹的层级名字当做url路由,可以深层次看到机器上任何层级的文件夹,实现系统文件夹浏览下载. 如果是点 ...

  2. LAMP 1.2 Apache编译安装问题解决

    这个错误安装 yum install -y gcc error: mod_deflate has been requested but can not be built due to prerequi ...

  3. AJAX经常遇到的那些问题

    本文主要介绍了AJAX工作原理以及在面试题经常会遇到的问题,目录如下: 什么是Ajax 为什么要使用Ajax? Ajax特点? AJAX优缺点? Ajax流程? XMLhttprequest对象 AJ ...

  4. sharepoint 2013 创建母版页

    一.创建新的母版页, 并添加了新的样式表 1.从CodePlex 上获得Starter Master Pages for SharePoint 2010 或复制以下母版代码 <%@Master  ...

  5. Java解析XML:Jdom解析和SAX解析

    今天看了Java解析XML的几种方法,记录一下 1.Jdom解析 (1)读取XML内容 private static void readXML() { // TODO Auto-generated m ...

  6. SQL标量值函数:小写金额转大写

    我们日常开发业务系统中,作为统计报表中,特别是财务报表,显示中文金额经常遇到. 转换大小写的方法有很多,以下是从数据库函数方面解决这一问题. 效果如图: 调用:SELECT dbo.[Fn_Conve ...

  7. 向PCD文件写入点云数据

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=83 本小节我们学习如何向PCD文件写入点云数据. 代码 章例2文件夹中,打开 ...

  8. Jenkins配置有用摘抄笔记

    使用jenkins配置.net mvc5网站自动构建全过程记录  转自:http://www.cnblogs.com/baiyunchen/p/4724350.html 持续集成是个简单重复劳动,人来 ...

  9. 截止JDK1.8版本,java并发框架支持锁包括?

    读写锁 自旋锁 乐观锁

  10. Git merge一个branch到另一个branch

    在项目开发过程中,需要merge一个branch (branch名 taskBranch) 到另一个名为develop 的branch 方法: 先保证当前停留在develop的branch上 然后执行 ...