我们常常要使用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. libpng交叉编译安装

    tar xzf libpng-1.5.22.tar.gz cd libpng-1.5.22 mkdir tmp 打开Makefile文件并修改CC=arm-linux-gcc ./configure ...

  2. 都是以父元素的width为参照物的

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

  3. JDBC 1

    Java 中的数据存储技术 在Java中,数据库存取技术可分为如下几类: JDBC直接访问数据库 JDO技术 第三方O/R工具,如Hibernate, ibatis 等 JDBC是java访问数据库的 ...

  4. socket编程概述

    一.基本流程如下: 整个TCP过程非常类似于电话系统.TCP是有两个不同主机上的进程需要进行通信,电话系统是有两个人位于不同地区的人需要进行通信. socket:获得可用于进程通信的端点.由于Linu ...

  5. ajax跨域相关

    ajax 技术使用xmlhttprequest组件附送请求时,发送请求的url和本网页的url地址必须在同一个域名下如果需要跨域,可以使用iframe或者<javascript src=&quo ...

  6. CPU是怎么制造的

    大概的过程就是,先选一堆好沙子(纯净的沙子),初步加工一般在沿海,然而都是初加工,因为技术不行,所以一般用比较污染环境的方法加工大99.9%纯度的硅,然后低价卖给国外企业,用高精尖技术加工到99.99 ...

  7. Mac下的SVN客户端工具Cornerstone使用教程

    前面几篇文章我介绍SVN服务器的安装,配置,实战.当然其中也加入了一些客户端测试的命令,使用命令当然是一个非常好的选择,但是对我们人类来说还是喜欢图形化界面的操作的.因此本文将介绍我喜欢的一款SVN客 ...

  8. 【模块应用】MFRC522开发笔记

    一.了解基本概念 ①ISO-14443A协议:( 国际标准化组织:International Organization for Standardization)RFID协议的一种;   PICC:临近 ...

  9. 解决:HotSeat短信图标提醒有误

    [操作步骤]正常收发短信.彩信. [测试结果]所有短信均已阅读,但在HOME界面的短信图标仍提示有一条短信未读.重启后仍存在. 经过分析,导致该情况的主要原因为当彩信已读的时候,launcher中进行 ...

  10. BZOJ 1600 建造栅栏

    O(N)分成1,2与3,4两部分搞一搞. #include<iostream> #include<cstdio> #include<cstring> #includ ...