我们常常要使用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. MongoDB常用操作一查询find方法db.collection_name.find()

    来:http://blog.csdn.net/wangli61289/article/details/40623097 https://docs.mongodb.org/manual/referenc ...

  2. [开发笔记]-VS2012打开解决方案崩溃或点击项目崩溃

    下午在使用VS2012建立Service服务项目时,只要一切换到设计视图页面中,VS就崩溃重启,从网上找了一种方法来解决,测试可行.但导致该问题的原因未知. 解决方案: 步骤1:开始-->所有程 ...

  3. 【个人使用.Net类库】前言

    个人接触.Net是在2013年8月份到了一家新的公司开始的. 目前为止,发现自己的知识储备如下: 基本的WinForm编程,但没做过对应项目. 基本的Asp.Net页面,做过查询.树形菜单.登录的小功 ...

  4. 关于HashMap中的负载因子

    这两天在看HashMap的时候,被负载因子float loadFactor搞得很晕,经过一天的研究,最后理出了自己的一点个人见解. 在HashMap的底层存在着一个名字为table的Entry数组,在 ...

  5. c#读写文本文档-1-用file类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  6. 创建和运行shell脚本程序

    转载请标明http://www.cnblogs.com/winifred-tang94/ 要创建一个shell脚本程序,首先新建一个文本文件,然后在这个文本文件中按照shell编程规则输入shell命 ...

  7. PDF2SWF转换只有一页的PDF文档,在FlexPaper不显示解决方法

    问题:PDF2SWF转换只有一页的PDF文档,在FlexPaper不显示! FlexPaper 与 PDF2SWF 结合是解决在线阅读PDF格式文件的问题的,多页的PDF文件转换可以正常显示,只有一页 ...

  8. poj1276 多重背包

    //Accepted 1100 KB 47 ms //多重背包 #include <cstdio> #include <cstring> #include <iostre ...

  9. access手工注入

    1.判断数据类型 and exists (select * from msysobjects) >0 and exists (select * from sysobjects) >0 一般 ...

  10. 2016年3月AV评测