jQuery添加/改变/移除CSS类
转自:http://www.jbxue.com/article/24589.html
在jquery中用到removeClass移除CSS类、addClass添加CSS类、toggleClass添加或者移除CSS类,hasClass判断是否已经存在CSS。
改变页面元素样式使用Javascript也可实现,但有没有更简洁的办法,答案是肯定的,现在有了jQuery,似乎让Js代码瘦身了不少,应验了那句话:“jQuery让JavaScript代码变得简洁!”,言归正传,来看jquery如何添加、移除CSS类:
1. removeClass() - 移除CSS类
$("#target").removeClass("oldClass");
//#target 指的是需要移除CSS类的元素的ID
//oldClass 指的是CSS类的名称
2.addClass() - 添加CSS类
$("#target").addClass("newClass");
//#target 指的是需要添加样式的元素的ID
//newClass 指的是CSS类的名称
3. toggleClass() - 添加或者移除CSS类:如果CSS类已经存在,它将被移除;相反,如果CSS类不存在,它将被加上。
$("#target").toggleClass("newClass") www.jbxue.com
//如果ID为“target”的元素已经定义了CSS样式,它将被移除;
//反之,CSS类“newClass”将被赋给该ID
4.hasClass("className") - 判断是否已经存在CSS
在实际运用中,我们通常是先定义好这些CSS类,然后通过Javascript事件触发(比如点击某个按钮)来改变页面元素样式。此外,jQuery还提供一种方法 hasClass("className"),用来判断某个元素是否已经被赋予某个CSS类。顺便告诉前端开发的新手,jquery是值得拥有的,有空了好好研究吧。
jQuery添加/改变/移除CSS类的更多相关文章
- jQuery中添加/改变/移除改变CSS样式例子
在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧. CSS()方法改变CSS样式 ...
- 如何添加/移除CSS类
在网页设计中,我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的clas ...
- js活jQuery实现动态添加、移除css/js文件
下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...
- jQuery添加、移除、改变class属性
jQuery中一般有3个关于改变元素class的函数addClass.removeClass.toggleClass addClass描述: 为每个匹配的元素添加指定的样式类名$('div').add ...
- jQuery动态追加移除CSS样式
jQuery基础知识,动态添加删除CSS样式 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- JQ添加移除css样式
1. addClass() - 添加CSS类 $("#target").addClass("newClass"); //#target 指的是需要添加样式的元素 ...
- JQ添加移除css样式--转载 心存善念
我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性 ...
- 脚本化CSS类-HTML5 classList属性
HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...
- jQuery修改class属性和CSS样式
jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...
随机推荐
- Java ThreadLocal (Java代码实战-006)
ThreadLocal解决什么问题 由于 ThreadLocal 支持范型,如 ThreadLocal< StringBuilder >,为表述方便,后文用 变量 代表 ThreadLoc ...
- java json与map互相转换(二)
java json与map互相转换(二) CreationTime--2018年7月16日15点09分 Author:Marydon 1.准备工作 所需jar包: commons-beanutil ...
- ArrayDeque源代码分析
1. 体系结构 了解特性,先看下体系结构: 如上所看到的,知道其支持 序列化,克隆,迭代器操作,队列特性.详细实现 除了实现以上接口外,扩展AbstractCollection 抽象类. 2. 应用场 ...
- 2、redis原生的命令操作不同数据类型
一.常用数据类型简介: redis常用五种数据类型:string,hash,list,set,zset(sorted set). 1.String类型 String是最简单的类型,一个key对应一个v ...
- GDALBuildVRT异构波段的支持
目录 简述 修改源码 1.修改DatasetProperty结构体 2.修改VRTBuilder::AnalyseRaster函数 3.修改VRTBuilder::CreateVRTNonSepara ...
- 图解Win7如何手动添加受信任证书
点击开始—>运行,如下图所示: 弹出“控制台”窗口如下,如下图所示: 点击“文件—添加/删除管理单元”,如下图所示: 选择“证书”,并点击“添加”,如下图所示: 在弹出的窗口上选 ...
- Axure快速原型教程02--创建页面和设置界面
目录 Axure快速原型教程02--创建页面和设置界面 Axure快速原型教程01--原型说明下载和安装 首先,在左侧的面板中,我们发现有一个叫sitemap的面板,这个面板就是我们的一个个的页面了, ...
- 递归查询构造jquery tree
1 现在有如下的一张表: CREATE TABLE [dbo].[ThemeCategory] ( [ID] [int] NOT NULL, [ThemeCategoryName] [nvarchar ...
- Dockerfile 构建后端springboot应用并用shell脚本实现jenkins自动构建
Dockerfile 文件构建docker镜像 FROM centos MAINTAINER zh*****eng "z*******ch.cn" ENV LANG en_US.U ...
- 完善_IO, _IOR, _IOW, _IOWR 宏的用法与解析
_IO, _IOR, _IOW, _IOWR 宏的用法与解析 原文地址:http://www.eefocus.com/ayayayaya/blog/12-03/245777_20cdd.html 作 ...