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类。

JQ添加移除css样式的更多相关文章

  1. JQ添加移除css样式--转载 心存善念

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

  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. jquery 给指定li添加制定的css样式

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

  6. jq修改多个css样式

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

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

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

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

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

  9. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

随机推荐

  1. bootstrp水平表单格式

    1:form里添加类 "form-horizontal" 2:把标签和表单控件(input 等)放在一个带有类名 "form-group"的div里 3:标签可 ...

  2. Quartz:ERROR threw an unhandled Exception

    详细的错误信息如下: -- ::] ERROR org.quartz.core.JobRunShell: - Job group1.job1 threw an unhandled Exception: ...

  3. Spring的起源和背景

    上图为Spring框架的组成结构 下面这几张也是的 Spring将大量实际开发中需要重复解决的步骤,抽象成了一个框架. 其中Spring Core Container是Spring框架的核心机制. S ...

  4. POJ 3461 Oulipo(乌力波)

    POJ 3461 Oulipo(乌力波) Time Limit: 1000MS   Memory Limit: 65536K [Description] [题目描述] The French autho ...

  5. 《Redis设计与实现》读书笔记

    <Redis设计与实现>读书笔记 很喜欢这本书的创作过程,以开源的方式,托管到Git上进行创作: 作者通读了Redis源码,并分享了详细的带注释的源码,让学习Redis的朋友轻松不少: 阅 ...

  6. Codeforces Round #379 (Div. 2) C. Anton and Making Potions 二分

    C. Anton and Making Potions time limit per test 4 seconds memory limit per test 256 megabytes input ...

  7. linux 命令集

          cat chattr chgrp c hmod chown cksum cmp diff diffstat file find git gitview indent cut ln less ...

  8. Android性能优化典范(二)

    Google前几天刚发布了Android性能优化典范第2季的课程,一共20个短视频,包括的内容大致有:电量优化,网络优化,Wear上如何做优化,使用对象池来提高效率,LRU Cache,Bitmap的 ...

  9. hdu 2604 Queuing(dp递推)

    昨晚搞的第二道矩阵快速幂,一开始我还想直接套个矩阵上去(原谅哥模板题做多了),后来看清楚题意后觉得有点像之前做的数位dp的水题,于是就用数位dp的方法去分析,推了好一会总算推出它的递推关系式了(还是菜 ...

  10. 【HTML5 】<script>元素async,defer异步加载

    原文地址:HTML5′s async Script Attribute原文日期: 2010年09月22日翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再 ...