我们常常要使用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. python登陆,注册小程序

    def login(username,password): ''' 用于用户登录 :param username: 用户输入用户名 :param password: 用户输入密码 :return: T ...

  2. jsoup Cookbook(中文版)--爬虫(java)

    转载:http://www.open-open.com/jsoup/ 目录: 入门 解析和遍历一个html文档 输入 解析一个html字符串 解析一个body片断 根据一个url加载Document对 ...

  3. hadoop启动jobhistoryserver

    hadoop启动jobhistoryserver来实现web查看作业的历史运行情况,由于在启动hdfs和Yarn进程之后,jobhistoryserver进程并没有启动,需要手动启动,启动的方法是通过 ...

  4. ios创建bundle的图片资源文件(转)

    在ios开发中为了方便管理资源文件,可以使用bundle的方式来进行管理,比如kkgridview里就是把所需的图片文件全部放在一个bundle来管理的 . 切记目前iOS中只允许使用bundle管理 ...

  5. hd oj2015

    #include "stdio.h"int main(){ int n,m,k,num,i,sum=0; while(~scanf("%d%d",&n, ...

  6. STL中的lower_bound和upper_bound的理解

    STL迭代器表述范围的时候,习惯用[a, b),所以lower_bound表示的是第一个不小于给定元素的位置 upper_bound表示的是第一个大于给定元素的位置. 譬如,值val在容器内的时候,从 ...

  7. 一、XML语法

    xml声明xml指令:<? ?>xml编码与乱码xml元素(标签)CDATA区空格与换行会被认为是标签的内容xml-stylesheet指令解析xml内容 <?xml version ...

  8. Interview----用最快的方法计算 Fibonacci 数

    输入 n, 用最快的方法求该 Fibocacci 数列的第 n 项. 方法1: 递归,非常慢 方法2: 迭代,因此计算 f[1] , f[2], f[3] ,,,, 复杂度 O(N) 方法3: 采用以 ...

  9. C#泛型(二)

    <1>.泛型方法 以前文章说到用一个泛型类 SortHelper 来做一个冒泡排序的处理,下面回顾一下之前的代码: public class SortHelper<T> whe ...

  10. Divisors_组合数因子个数

    Description Your task in this problem is to determine the number of divisors of Cnk. Just for fun -- ...