【JS实现JQuery方法】hasClass、addClass、removeClass

hasClass

// 判断是否有传入的样式名
function hasClass (el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  return reg.test(el.className)
}

addClass

// 给dom添加样式名称，元素，要添加的样式名
function addClass (el, className) {
  if (hasClass(el, className)) {
    return
  }
  // 先将传入el原来的class拆分成数组
  let newClass = el.className.split(' ')
  // 再将函数传递进来的要添加的className加入到数组末尾
  newClass.push(className)
  // 再将数组使用join方法转化拼接为字符串，并赋值给el元素的className属性
  el.className = newClass.join(' ')
}

如果不需要兼容低端浏览器，那么可以直接使用el.classList.add()方法。

document.getElementById("myDIV").classList.add("mystyle");

classList浏览器支持

QQ浏览器：10.4&+

safari-ios：5-6.1

Edge：12&+

removeClass

删除样式名

function removeClass(obj, cls) {
    if (hasClass(obj, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        obj.className = obj.className.replace(reg, ' ');
    }
}

同样的如果不需要兼容低版本浏览器，可以直接使用domEl.classList.remove()

toggleClass

// 切换样式名 如果没有添加 有则删除
function toggleClass(obj,cls){
    if(hasClass(obj,cls)){
        removeClass(obj, cls);
    } else {
        addClass(obj, cls);
    }
}

同样的domEl.classList.toggle()方法也可以替代这个函数。

下面是另一个版本的：

wQuery.prototype.hasClass = function (obj, cName) {
    // <div class="abc"> <div class="hello abc def"></div> <div class="hello def abc"></div>
    return obj.className.match(new RegExp('(\\s|^)' + cName + '(\\s|$)'));
}

wQuery.prototype.addClass = function (cName) {
    for (var i = 0; i < this.elements.length; i++) {
        if (!this.hasClass(this.elements[i], cName)) {
            // hello abc   // abc
            this.elements[i].className += " " + cName;
            this.elements[i].className = this.trim(this.elements[i].className);
        }
    }
    return this;
}

wQuery.prototype.removeClass = function (cName) {
    for (var i = 0; i < this.elements.length; i++) {
        if (this.hasClass(this.elements[i], cName)) {
            var re = new RegExp('(\\s|^)' + cName + '(\\s|$)');
            this.elements[i].className = this.elements[i].className.replace(re, " ");
            this.elements[i].className = this.trim(this.elements[i].className);
        }
    }
    return this;
}

wQuery.prototype.toggleClass = function (cName) {
    for (var i = 0; i < this.elements.length; i++) {
        if (this.hasClass(this.elements[i], cName)) {
            this.removeClass(cName);
        } else {
            this.addClass(cName);
        }
    }
    return this;
}

classList

classList 属性返回元素的类名，作为 DOMTokenList 对象。

该属性用于在元素中添加，移除及切换 CSS 类。

关于它的兼容性，请参考《二》，更多使用方法，可以参考：https://www.runoob.com/jsref/prop-element-classlist.html

添加移除类

// 为 <div> 元素添加多个类:
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
// 为 <div> 元素移除一个类:
document.getElementById("myDIV").classList.remove("mystyle");
// 为 <div> 元素移除多个类:
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
// 为 <div> 元素切换类:
document.getElementById("myDIV").classList.toggle("newClassName");

查询操作

首先是示例元素结构：

<div id="myDIV"class="mystyle anotherClass thirdClass">I am a DIV element</div>

// 获取 <div> 元素的类名:
var x = document.getElementById("myDIV").classList;
// 输出结果：mystyle anotherClass thirdClass

// 查看 <div> 元素有多少个类名:
var x = document.getElementById("myDIV").classList.length; 
// 结果：3

// 获取 <div> 元素的第一个类名（索引为0）:
var x = document.getElementById("myDIV").classList.item(0);
// 结果 mystyle

// 查看元素是否存在 "mystyle" 类:
var x = document.getElementById("myDIV").classList.contains("mystyle");
// 结果x是true

// 查看元素是否存在 "mystyle" 类，如果存在则移除另外一个类名:
var x = document.getElementById("myDIV");

if (x.classList.contains("mystyle")) {
    x.classList.remove("anotherClass");
} else {
    alert("Could not find it.");
}

封装

export function addClass(el, className) {
  if (!el.classList.contains(className)) {
    el.classList.add(className)
  }
}

export function removeClass(el, className) {
  el.classList.remove(className)
}