JSFiddle - React, Tailwind, and code Playground
HTML
<div class="menu title">
1234
</div>
CSS
.menu{
background-color: red;
}
.title{
color:white;
}
JavaScript
// вспомогательная функция для создания ноды
function createNode(name, klasses) {
var n = document.createElement(name);
n.className = klasses;
return n;
}
function l(x) {
console.log(x);
}
function hasClass(node, klass){
var regExp = new RegExp("\\s"+klass+"\\s");
var klass = " "+node.className+" ";
return regExp.test(klass);
}
function addClass(node, klass){
if(!hasClass(node, klass)){
node.className +=" "+klass;
}
}
function removeClass(node, klass){
if(hasClass(node, klass)){
var regExp = new RegExp("\\b"+klass+"\\b", "i");
var klass = " " + node.className + " ";
node.className = klass.replace(regExp, "");
}
}
l(hasClass(createNode('div', 'test'), 'test')); // true
l(hasClass(createNode('div', 'test'), 'tes')); // false
l(hasClass(createNode('div', 'test1 test2'), 'tes')); // false
l(hasClass(createNode('div', 'test1 test2'), 'test1')); // true
removeClass(document.querySelector('.menu'), "menu");
if (hasClass(createNode('div', 'hello-world'), 'hello')) {
throw new Error("failed");
}