JavaScript 切换DOM元素上的类名（支持多个类名）

Posted 2021-05-19

/**
 * 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;
};