Jquery&classList

Posted 2023-03-14

参考技术A 通过classList原生实现JQuery的addClass、removeClass、hasClass。
案例效果预览

Element.classList 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList 集合。但是你可以使用 add 和 remove 方法修改它。

添加一个或者多个token。
语法： tokenList.add(token1[, token2[, ...tokenN]]);

如果包含该toekn，则返回true，否则返回false。
语法： tokenList.contains(token);

从列表中删除一个或者多个token。
语法： tokenList.remove(token1[, token2[, ...tokenN]]);

语法： tokenList.replace(oldToken, newToken);
PS： oldToken 被替换的token， newToken 用于替换oldToekn的。返回值为Boolean，若成功替换返回true，否则返回false，当 oldToken 不存在时会返回false。在较旧浏览器中，replace()会返回void。

若该token存在，从DOMTokenList中删除指定的token，并返回false。若该token不存在，则会添加指定token，并返回true。
语法： tokenList.toggle(token [, force]);
PS： force 为Boolean值，表示轮流切换到单向，false则token将仅删除而不添加，true则token只添加不会被删除。

classList Mdn