我们常常要使用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. Oracle、Mysql、Sql Server语句的区别

    1.空值的处理——判断是否为空,为空时取一个值,不为空时取另一个值 1).Sql Server 中 ISNULL(check_expression,replacement_value) 解释:如果ch ...

  2. jquery表单提交和重置

    $('#myform').submit() 表单提交 $('#myform')[0].reset() 表单重置

  3. RM报表 文本框 自动换行 相关代码

    procedure TRMCustomMemoView.WrapMemo1(aAddChar: Boolean); var lCurHeight, lOneLineHeight, lMaxWidth: ...

  4. Linux摄像头驱动学习之:(二)通过虚拟驱动vivi分析摄像头驱动

    一.通过指令 "strace -o xawtv.log xawtv" 得到以下调用信息:// 1~7都是在v4l2_open里调用1. open2. ioctl(4, VIDIOC ...

  5. UITextView实现图文混排效果

    用UITextView实现图文混排效果的展示,首先要禁用UITextView的编辑功能,将属性editable设置为NO 1.首先创建一个NSTextAttachment对象,这个对象有一个image ...

  6. 使用OCI向Oracle插入Geometry数据

    使用C/C++操作Oracle数据库,使用OCI可谓是最强大,当然也是最难的方式.Oracle是一个功能复杂而强大的数据库,它可以很好的支持空间数据(Oracle spatial).如何使用OCI向O ...

  7. 关键字const

    const关键字常和指针一起使用. 1,const给读代码的人传达非常有用的信息.比如一个函数的参数是const char *,你在调用这个函数时就可以放心地传给它char *或const char ...

  8. SharePoint 2013 开发——发布SharePoint应用程序

    博客地址:http://blog.csdn.net/FoxDave 前几篇我们介绍了开发.部署和调试SharePoint应用程序的基础,本篇介绍更实用的操作,当我们开发一个SharePoint应用 ...

  9. SharePoint开发 - 使用Session(代码修改webconfig)

    博客地址 http://blog.csdn.net/foxdave SharePoint启用Session可以使用Powershell,戳这里:可以修改webconfig. 本篇叙述的重点是通过fea ...

  10. 根据username查找user

    返回的是一个list<User>,不过验证密码的时候,要求返回是一个user对象,如果用uniqueresult,这个是过时的方法,如果用getResultList 会得到一个列表,get ...