JavaScript 切换DOM元素上的类名(支持多个类名)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 切换DOM元素上的类名(支持多个类名)相关的知识,希望对你有一定的参考价值。

/**
 * Toggle ClassName
 * Works on els with multiple classnames
 */

function toggleClassname (el, newClassname, defaultClassname) {

  if (hasClass( el, defaultClassname)){
    var re = new RegExp("(^|\\s)" + defaultClassname + "(\\s|$)"); 
    el.className = el.className.replace(re, ' '+ newClassname +' ');

  } else if (hasClass( el, newClassname)){
    var re = new RegExp("(^|\\s)" + newClassname + "(\\s|$)"); 
    el.className = el.className.replace(re, ' '+ defaultClassname +' ');

  } else
    el.className += ' ' + newClassname;

}


/**
 * Has Class? (Matt Kruse)
 * Kruse's hasClass, with slight modification	
 * Determine if an object or class string contains a given class.
 * see http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/b68cac304ee6de78/e445c1df18698a3f?lnk=gst&q=hasclass&rnum=3
 */

function hasClass (obj, className) {

  if (typeof obj == 'undefined' || obj==null || !RegExp) { 
    return false; 
  }

  var re = new RegExp("(^|\\s)" + className + "(\\s|$)");
  if (typeof(obj)=="string") {
    return re.test(obj);
  }
  else if (typeof(obj)=="object" && obj.className) {
    return re.test(obj.className);
  }
  return false;
};

以上是关于JavaScript 切换DOM元素上的类名(支持多个类名)的主要内容,如果未能解决你的问题,请参考以下文章

ES6 - 原生js遍历DOM - document.querySelectorAll(‘.xx‘)给DOM元素添加删除类名 - dom.classList.add切换类名toggle

使用类名DOM javascript删除创建的元素

JavaScript“classList”切换不会切换元素的类名

原生js操作DOM元素的一些使用

jQuery之DOM属性

前端速成-JavaScript | 09.JavaScript DOM