方法1:使用className属性;

方法2:使用classList API;

  1. //用于匹配类名存在与否
  2. function reg(name){
  3. return new RegExp('(^|\\s)'+name+'(\\s+|$)');
  4. }
  5.  
  6. //hasClass addClass removeClass toogleClass
  7. var hasClass,addClass,removeClass;
  8. if('classList' in document.documentElement){
  9. hasClass = function(obj, cname) { // obj为要操作的元素对象,cname是类名
  10. return obj.classList.contains(cname);
  11. };
  12. addClass = function(obj, cname) {
  13. obj.classList.add(cname);
  14. };
  15. removeClass = function(obj,cname) {
  16. obj.classList.remove(cname);
  17. };
  18. toggleClass = function(obj, cname) {
  19. obj.classList.toggle(cname);
  20. };
  21. }else{
  22. hasClass = function(obj, cname) {
  23. return reg(cname).test(obj.className);
  24. };
  25. addClass = function(obj, cname) {
  26. if(!hasClass(obj,cname)){
  27. obj.className=obj.className+' '+cname;
  28. }
  29. };
  30. removeClass = function(obj, cname) {
  31. obj.className=obj.className.replace(reg(cname),' ');
  32. };
  33. toggleClass = function(obj, cname) {
  34. var toggle=hasClass(obj,cname)?removeClass:addClass;
  35. toggle(obj,cname);
  36. };
  37. }
  38.  
  39. //true
  40. document.body.classList.toString() === document.body.className;

注意:这种方法每次只能传一个类名且不能级联操作,而jquery下面的类似操作是可以操作多个类名的。

所以扩展一下:

  1. //addClass
  2. DOMTokenList.prototype.addClass = function(str) {
  3. tts.split(' ').forEach(function(c){
  4. this.add(c);
  5. }.bind(this));
  6. return this;
  7. }
  8.  
  9. //removeClass
  10. DOMTokenList.prototype.removeClass = function(str) {
  11. tts.split(' ').forEach(function(t){
  12. this.remove(t);
  13. }.bind(this));
  14. return this;
  15. }
  16.  
  17. //removeClass
  18. DOMTokenList.prototype.toggleClass = function(str) {
  19. tts.split(' ').forEach(function(t){
  20. this.toggle(t);
  21. }.bind(this));
  22. return this;
  23. }

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. 002-Spring Boot将WAR文件部署到Tomcat

    一.概述 springboot 带有内置Tomcat 服务器,可以直接将项目打包成jar运行,如果在需要把项目打成war包,使用外置tomcat部署.下面是将springboot项目部署为war项目的 ...

  2. php与oracle11g经典分页

    <?php $t1 = xdebug_time_index(); $conn = oci_connect("SCOTT","TIGER","19 ...

  3. (转 )C++ static、const和static const 以及它们的初始化

    const定义的常量在函数执行之后其空间会被释放,而static定义的静态常量在函数执行后不会被释放其空间.但不论是Const还是static  他们定义的内容都会随着程序的结束而被系统清楚. sta ...

  4. Selenium的PageFactory & PageObject 在大型项目中的应用

    因为最近遇到的技术问题一直没找到可行的解决办法,一直在翻看selenium的源代码,之前写测试代码的时候就是拿来即用,写什么功能啊,就按手动的操作步骤去转换,近日看到一个文章,又去wiki上查了查,觉 ...

  5. HTML5游戏开发系列教程8(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-8/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...

  6. SqlAlchemy 中操作数据库时session和scoped_session的区别(源码分析)

    原生session: from sqlalchemy.orm import sessionmaker from sqlalchemy import create_engine from sqlalch ...

  7. 001-netty的优势

    1.API简单. 2.性能高. 3.成熟稳定. 4.入门门槛低.

  8. mongodb中的_id的ObjectId的生成规则

    MongoDB中存储的文档必须有一个"_id" .这个键值可以是任何类型,默认是ObjectID对象.在一个集合里,每个文档都有一个唯一的“_id”,确保集合里的每个文档都能被唯一 ...

  9. Phoenix编译支持CDH

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl/p/6898227.html 转载请注明出处 最近由于想调研下低延迟的数据查询框架,那么基于SQL on Hba ...

  10. 由浅入深之Tensorflow(4)----Saver&restore

    x = tf.placeholder(tf.float32) y = tf.placeholder(tf.float32) w = tf.Variable(tf.zeros([1, 1], dtype ...