js实现类名的添加与移除
方法1:使用className属性;
方法2:使用classList API;
//用于匹配类名存在与否
function reg(name){
return new RegExp('(^|\\s)'+name+'(\\s+|$)');
} //hasClass addClass removeClass toogleClass
var hasClass,addClass,removeClass;
if('classList' in document.documentElement){
hasClass = function(obj, cname) { // obj为要操作的元素对象,cname是类名
return obj.classList.contains(cname);
};
addClass = function(obj, cname) {
obj.classList.add(cname);
};
removeClass = function(obj,cname) {
obj.classList.remove(cname);
};
toggleClass = function(obj, cname) {
obj.classList.toggle(cname);
};
}else{
hasClass = function(obj, cname) {
return reg(cname).test(obj.className);
};
addClass = function(obj, cname) {
if(!hasClass(obj,cname)){
obj.className=obj.className+' '+cname;
}
};
removeClass = function(obj, cname) {
obj.className=obj.className.replace(reg(cname),' ');
};
toggleClass = function(obj, cname) {
var toggle=hasClass(obj,cname)?removeClass:addClass;
toggle(obj,cname);
};
} //true
document.body.classList.toString() === document.body.className;
注意:这种方法每次只能传一个类名且不能级联操作,而jquery下面的类似操作是可以操作多个类名的。
所以扩展一下:
//addClass
DOMTokenList.prototype.addClass = function(str) {
tts.split(' ').forEach(function(c){
this.add(c);
}.bind(this));
return this;
} //removeClass
DOMTokenList.prototype.removeClass = function(str) {
tts.split(' ').forEach(function(t){
this.remove(t);
}.bind(this));
return this;
} //removeClass
DOMTokenList.prototype.toggleClass = function(str) {
tts.split(' ').forEach(function(t){
this.toggle(t);
}.bind(this));
return this;
}
js实现类名的添加与移除的更多相关文章
- js中数组的添加和移除
1.引入js文件 <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>2.HTML中代 ...
- js操作DOM动态添加和移除事件
非IE下,注意事件名不带on,如onclick为click 添加事件:DOM对象.addEventListener('事件名',函数名,true/false); 删除事件:DOM对象.removeEv ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- javaScript 添加和移除class类名的几种方法
添加类属性: // 一次只能设置一个类值,如果当前属性本身存在类值,会被替换 element.className = '类名'; /* * .setAttribute 用来设置自定义属性和值的 * 自 ...
- JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点
DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...
- jQuery添加/改变/移除CSS类
转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...
- js进阶 9-14 js如何实现下拉列表多选移除
js进阶 9-14 js如何实现下拉列表多选移除 一.总结 一句话总结: 1.js如何实现下拉列表多选移除? 把这个下拉列表中的option移除,然后加到另外一个下拉列表(文字)中去.remove方法 ...
- DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
DOM操作 --如何添加.移除.移动.复制.创建和查找节点等. (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个 ...
- spring:如何用代码动态向容器中添加或移除Bean ?
先来看一张类图: 有一个业务接口IFoo,提供了二个实现类:FooA及FooB,默认情况下,FooA使用@Component由Spring自动装配,如果出于某种原因,在运行时需要将IFoo的实现,则F ...
随机推荐
- 如何通过 ClickBank 等类似虚拟平台进行在线销售并获得收益
CLICKBANK在国内被广大赚友简称为CB,和淘金小站之前介绍过的PayDotCom一样,都是国外非常著名的CPS广告联盟.CLICKBANK成立于1998年,是全球四个最大的虚拟商品零售平台之一( ...
- Linux安装Java开发环境
一.JDK安装 安装JDK的实现步骤(使用root用户登录安装,避免需要对文件授权) (1)下载JDK,JDK的存放目录一般存放于 /opt目录下(Oracle官网下载jdk,需要accept lic ...
- 模块讲解----json模块(跨平台的序列化与反序列化)
一.json的特点 1.只能处理简单的可序列化的对象:(字典,列表,元祖) 2.json支持不同语言之间的数据交互:(python - go,python - java) 二.使用场景 1.玩 ...
- Castle连接多数据库配置
ActiveRecord 的多数据库配置基本沿袭了 NHibernate 的思想,只不过在配置文件结构上作了些调整.1. 采用继承方式,归纳使用同一数据库的类型.比如 A.B.C.D.E 中 A.B连 ...
- idea新建的项目,文件夹右键不能新建class
一般情况下,新建的mave项目,通常没有XXX\src\main\java这个目录,如果手动创建,则又不能右键build与java相关的,强行建立的话,也不会被idea所识别,更不会被虚拟机编译执行. ...
- APP移动端开发html模板
移动端开发模板: 750的稿子除以75: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- 论文笔记:Batch Normalization: Accelerating Deep Network Training by Reducing Internal Covariate Shift
ICML, 2015 S. Ioffe and C. Szegedy 解决什么问题(What) 分布不一致导致训练慢:每一层的分布会受到前层的影响,当前层分布发生变化时,后层网络需要去适应这个分布,训 ...
- js经典面试问题:如何让for循环中的setTimeout()函数像预想中一样工作?
setTimeout()是js中的一类重要函数,将一段代码延迟一定时间并异步执行.但是这个函数经常不听话.在实践中,可能经常有人碰到类似下面的这种情况: for (var i = 1; i <= ...
- Linux中Qt的安装
1.下载Ot安装包 Qt5.30的下载地址如下,在网页中打开找到需要的资源,下载.run格式的安装软件. http://download.qt.io/archive/qt/5.3/5.3.0/qt-o ...
- 浅析SQL注入
body, td { font-family: calibri; font-size: 10pt; } 演示 记得以前瞎鼓捣的时候,学过一个传说中的SQL注入万能字符串,是这个样子的' or '1'= ...