方法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实现类名的添加与移除的更多相关文章

  1. js中数组的添加和移除

    1.引入js文件 <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>2.HTML中代 ...

  2. js操作DOM动态添加和移除事件

    非IE下,注意事件名不带on,如onclick为click 添加事件:DOM对象.addEventListener('事件名',函数名,true/false); 删除事件:DOM对象.removeEv ...

  3. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  4. javaScript 添加和移除class类名的几种方法

    添加类属性: // 一次只能设置一个类值,如果当前属性本身存在类值,会被替换 element.className = '类名'; /* * .setAttribute 用来设置自定义属性和值的 * 自 ...

  5. JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点

    DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...

  6. jQuery添加/改变/移除CSS类

    转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...

  7. js进阶 9-14 js如何实现下拉列表多选移除

    js进阶 9-14 js如何实现下拉列表多选移除 一.总结 一句话总结: 1.js如何实现下拉列表多选移除? 把这个下拉列表中的option移除,然后加到另外一个下拉列表(文字)中去.remove方法 ...

  8. DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

    DOM操作 --如何添加.移除.移动.复制.创建和查找节点等. (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个 ...

  9. spring:如何用代码动态向容器中添加或移除Bean ?

    先来看一张类图: 有一个业务接口IFoo,提供了二个实现类:FooA及FooB,默认情况下,FooA使用@Component由Spring自动装配,如果出于某种原因,在运行时需要将IFoo的实现,则F ...

随机推荐

  1. PHP 基础篇 - PHP 的 BC MATH 系列数学函数

    一.常见问题 用 PHP 做计算时经常会遇到精度带来的问题,下面来看两个常见的例子: 1. 运算比较 下面表达式输出的结果不是相等: <?php echo 2.01 - 0.01 == 2 ? ...

  2. Spring框架第四篇之基于注解的DI注入

    一.说明 与@Component注解功能相同,但意义不同的注解还有三个: 1)@Repository:注解在Dao实现类上 2)@Service:注解在Service实现类上 3)@Controlle ...

  3. django xadmin的全局配置

    在adminx.py中增加 class BaseSetting(object): enable_themes = True use_bootswatch = True class GlobalSett ...

  4. Python 集合(set)的使用总结

    集合的特点:去重.无序,因此无法通过下标取值. 1. 定义集合 s = set() #定义空的集合 s2 = {'} # 不是key -value形式的话就是集合,不是字典 s3 ={'} print ...

  5. Windows server 2003 伪静态配置方法

    Windows server 2003 伪静态配置方法   先我们下载Rewrite伪静态组件到服务器,然后解压到D:\Rewrite下,解压后如下图: 提示:ReWrite组件所在目录要有网站所有者 ...

  6. 解决 ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务

    速度太慢点击了一下优化,出现了 ORA-12514,搜索了解决方法记录一下,第一个基本服务就解决了. 转自:http://apps.hi.baidu.com/share/detail/19115407 ...

  7. Codeforces Round #430 (Div. 2) C. Ilya And The Tree

    地址:http://codeforces.com/contest/842/problem/C 题目: C. Ilya And The Tree time limit per test 2 second ...

  8. [转]Algolia的分布式搜索网络架构

    转自:http://www.csdn.net/article/2015-03-11/2824176-the-architecture-of-algolias-distributed-search-ne ...

  9. 资料:mnist.pkl.gz数据包的下载以及数据内容解释

    deeplearning.net/data/mnist/mnist.pkl.gz The MNIST dataset consists of handwritten digit images and ...

  10. Linux 安全配置指南

    1.Bios Security 一定要给Bios设置密码,以防通过在Bios中改变启动顺序,而可以从软盘启动.这样可以阻止别人试图用特殊的启动盘启动你的系统,还可以阻止别人进入Bios改动其中的设置( ...