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

    排序1---冒泡法: 单向冒泡排序的基本原理就是:对于给定的n个数据,从第一个数据开始一次对相邻的两个数据进行比较,当前面的数据大于后面的数据时,交换位置,进行一轮比较和换位后,n个数据中最大的那个被 ...

  2. JS ES6 -- let命令

    1.ES6新增了块级作用域的let和const 这新特性let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. for循环的计数器,就很合适使用let命令 ...

  3. Redis IRedisTypedClient

    IRedisTypedClient IRedisTypedClient类相当于IRedicClient的强类型版,其方法与属性大多数与IRedisClient类似. 它支持在Redis中使用Linq查 ...

  4. js 取get过来的数据

    function getQuery(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&am ...

  5. mysql 表名作为存储过程变量

    mysql默认不支持表名作为变量名,如下所示 delimiter $$ DROP procedure IF EXISTS getDataByDbName $$ CREATE procedure get ...

  6. idea中java项目增加module后,手动增加xml文件,合并到webapp/WEB-INFO或WEB-INFO(包)

    当手工增加一个module,增加配置文件(如:web.xml)需要合并到文件夹里,要不众多文件在一个src文件夹下,太凌乱. 1. 合并到webapp/WEB-INFO下 a. 首先增加webapp目 ...

  7. c#桌面应用程序--窗体重复创建问题

    重复创建窗体问题的引出 连续单击添加窗体按钮,通过普通的在按钮事件方法中创建窗体,显示窗体的后果是,我们会发现,相同的窗体会重复不断的弹出.代码如下: //添加窗口事件方法 private void ...

  8. Java中的Junit单元测试

    测试方法必须使用@Test进行修饰 测试方法必须使用public void 进行修饰,不能带任何的参数 新建一个源代码目录来存放我们的测试代码 测试类的包名应该和被测试类的包名一致 测试单元中的每个方 ...

  9. c/c++/c# 快速计算 Cumulative Normal Distribution 正态累积函数CDF

    链接: http://stackoverflow.com/questions/2328258/cumulative-normal-distribution-function-in-c-c http:/ ...

  10. uva 1608 不无聊的序列

    uva 1608 不无聊的序列 紫书上有这样一道题: 如果一个序列的任意连续子序列中都至少有一个只出现一次的元素,则称这个序列时不无聊的.输入一个n个元素的序列,判断它是不是无聊的序列.n<=2 ...