我们常常要使用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类。

常见问题:

<label for="TrueName" generated="true" class="msg-error" style="">正确</label>

通过addClass("msg-success");

<label for="TrueName" generated="true" class="msg-error msg-success" style="">正确</label>

JQ添加移除css样式--转载 心存善念的更多相关文章

  1. JQ添加移除css样式

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

  2. 如何添加/移除CSS类

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

  3. jQuery动态追加移除CSS样式

    jQuery基础知识,动态添加删除CSS样式 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. jQuery 动态添加、删除css样式

    1.addClass css中: <style type="text/css">       .chColor {background: #267cb7;color:w ...

  5. TP5.1 分页CSS样式(转载)

    效果如图: 1.在extend\目录下创建page目录,在page目录中创建Page.php文件,将以下代码放入文件中 <?php namespace page; use think\Pagin ...

  6. jquery 给指定li添加制定的css样式

    $("ul li").eq(1).css({"color":"red"}); //第二个li $("ul li").eq ...

  7. jq修改多个css样式

    $("#xxx").css({"属性名称": "属性值", "属性名称": "属性值" });

  8. salesforce linghtning component 自动添加标准style css样式

    Your app automatically gets Lightning Design System styles if it extends  force:slds <aura:applic ...

  9. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

随机推荐

  1. 2、IValueConverter应用

    1.C#代码如下: public class logotoimgConverter:IValueConverter { //将logo转换为URI public object Convert(obje ...

  2. ubuntu安装vim

    1.安装 sudo apt-get install vim-gtk 2.安装完成之后,在命令行敲入vi,按“tab”键,可以看到,已经有vim命令的存在,安装成功. 3.配置 sudo vim /et ...

  3. Codeforces Round #326 (Div. 2)-Duff in Love

    题意: 一个数x被定义为lovely number需要满足这样的条件:不存在一个数a(a>1),使得a的完全平方是x的因子(即x % a2  != 0). 给你一个数n,求出n的因子中为love ...

  4. [Swift2.0系列]Defer/Guard 基础语法

    1.Defer Swift2.0中加入了defer新语法声明.defer译为延缓.推迟之意.那么在Swift2.0中它将被应用于什么位置呢?比如,读取某目录下的文件内容并处理数据,你需要首先定位到文件 ...

  5. switch… case 语句的用法(二)

    总结来说:switch的用法是判断case后面的表达式和switch后面的表达式是否相匹配,一旦case匹配,就会顺序执行后面的程序代码,而不管后面的case是否匹配,直到遇见break.都不匹配找d ...

  6. LNA和PA

    低噪声放大器(Low Noise Amplifier) -------------LNA 功率放大器(Power Amplifier)---------------------PA LNA是低噪声放大 ...

  7. 5分钟学习maven(根据英文文档整理)

    英文原地址:http://maven.apache.org/guides/getting-started/maven-in-five-minutes.html 一.前提 需要懂得如何在计算机上安装软件 ...

  8. Ubuntu系统启用Apache Mod_rewrite模块

    在终端中执行 sudo a2enmod rewrite 指令后,即启用了 Mod_rewrite 模块. 另外,也可以通过将 /etc/apache2/mods-available/rewrite.l ...

  9. ERP部门的添加(十一)

    功能需求: 1.有部门管理权限的人员进行添加部门基本信息. 2.有部门权限管理的人员查询部门基本信息. 3.有部门权限管理的人员进行修改部门基本信息. 4.在一个页面中实现,使用弹出对话框方式 存储过 ...

  10. 11、C#基础整理(特殊集合和哈希表)

    特殊集合:队列.栈 一.栈Stack类:先进后出,没有索引 Stack ss = new Stack(); 1.增加数据:push :将元素推入集合 ss.Push(); ss.Push(); ss. ...