如何添加/移除CSS类
在网页设计中,我们常常要使用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类。
如何添加/移除CSS类的更多相关文章
- jQuery添加/改变/移除CSS类
转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...
- JQ添加移除css样式
1. addClass() - 添加CSS类 $("#target").addClass("newClass"); //#target 指的是需要添加样式的元素 ...
- JQ添加移除css样式--转载 心存善念
我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性 ...
- js动态给当前点击元素添加css类
1.页面:
- js活jQuery实现动态添加、移除css/js文件
下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...
- 脚本化CSS类-HTML5 classList属性
HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...
- JQuery:JQuery操作CSS类
JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...
- Jquery添加移除样式
获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: var p_class = $("p ...
- jQuery 学习03——HTML:捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸
jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...
随机推荐
- ubuntu安装配置ApachePhpMysql
1.安装之前先sudo源 sudo apt update 2.安装Apache2 sudo apt install apache2 3.更改默认目录: vi /etc/apache2/apache2. ...
- C++中的对象的赋值和复制
对象的赋值 如果对一个类定义了两个或多个对象,则这些同类的对象之间可以互相赋值,或者说,一个对象的值可以赋给另一个同类的对象.这里所指的对象的值是指对象中所有数据成员的值. 对象之间的赋值也是通过赋值 ...
- Learning Python 008 正则表达式-003 search()方法
Python 正则表达式 - search()方法 findall()方法在找到第一个匹配之后,还会继续找下去,findall吗,就是找到所有的匹配的意思.如果你只是想找到第一个匹配的信息后,就不在继 ...
- 10、RNA-seq for DE analysis training(Mapping to assign reads to genes)
1.Goal of mapping 1)We want to assign reads to genes they were derived from 2)The result of the mapp ...
- python的pip 安装
python的pip 安装 python有很多好用的包,但是需要的时候一一安装实在是麻烦,还好有pip这么好用的安装工具.所以第一步是安装pip,然后其它软件都so easy! 文章来源:https: ...
- 想以编程为职业,现在正在看毕向东的java基础,接下来应该看什么视频,求前辈们指教。
想以编程为职业,现在正在看毕向东的java基础,接下来应该看什么视频,求前辈们指教. https://zhidao.baidu.com/question/1368482680246425699.htm ...
- ubuntu下sourceinsight的安装
转载自blog.csdn.net/zzobin/article/details/7376616 1. 安装wine 详看:http://wiki.ubuntu.org.cn/Wine sudo apt ...
- 【eclipse-js验证】
第一步:去除eclipse的JS验证:将windows->preference->Java Script->Validator->Errors/Warnings->Ena ...
- I18N的前后端实现
所需工具: 1.Vue https://cn.vuejs.org/ 2.Vue-I18N https://www.npmjs.com/package/vue-i ...
- 一个MySQL中两表联合update的例子(并带有group by分组)
内容简介 本文主要展示了在MySQL中,使用两表联合的方式来更新其中一个表字段值的SQL语句. 也就是update table1 join table2 on table1.col_name1=tab ...