JSFiddle - React, Tailwind, and code Playground
JavaScript
var dom = {
_getClassList: function (node) {
return node.className.split(/\s/);
},
hasClass: function (node, klass) {
var classList = this._getClassList(node);
return classList.indexOf(klass) > -1;
},
removeClass: function (node, klass) {
if (this.hasClass(node, klass)) {
var classList = this._getClassList(node);
var filteredClassList = classList.filter(classInList => classInList !== klass)
node.className = filteredClassList.join(' ');
return node;
}
return false;
},
addClass: function (node, klass) {
if (!this.hasClass(node, klass)) {
node.className += ' ' + klass;
return node;
}
return false;
}
}
function createNode(name, klasses) {
var n = document.createElement(name);
n.className = klasses;
return n;
}
function l(x) {
console.log(x);
}
l(true === dom.hasClass(createNode('div', 'test'), 'test'));
l(false === dom.hasClass(createNode('div', 'test'), 'tes'));
l(false === dom.hasClass(createNode('div', 'test1 test2'), 'tes'));
l(true === dom.hasClass(createNode('div', 'test1 test2'), 'test1'));
var n1 = createNode('button', '');
dom.addClass(n1, 'btn');
l(true === dom.hasClass(n1, 'btn'));
dom.removeClass(n1, 'btn');
l(false === dom.hasClass(n1, 'btn'));
var n2 = createNode('p', 'test test');
// Удаляются все классы test
dom.removeClass(n2, 'test');
l(false === dom.hasClass(n1, 'test'));