JSFiddle - React, Tailwind, and code Playground
by shapeshifta
HTML
<div id="test1" class="test1 test3">Hallo Test!</div>
<div id="test2" class="test1 test2 test3">Hallo Test!</div>
<div id="test3" class="">Hallo Test!</div>
JavaScript
const $$ = document.querySelectorAll.bind(document);
NodeList.prototype.__proto__ = Array.prototype;
const hasAnyOfClass = ((selector, classes) => {
if (typeof selector === "string") {
selector = $$(selector);
}
if (typeof classes === "string") {
classes = [classes];
}
return classes
.map(cssClass => selector.classList.contains(cssClass))
.reduce((a, b) => a || b);
});
console.log($$("#test1"));
console.log(hasAnyOfClass($$("#test1"), ["test1", "test2", "test3"]));
console.log(hasAnyOfClass($$("#test2"), ["test4", "test2", "test5"]));
console.log(hasAnyOfClass("#test3", ["test1", "test2", "test3"]));
console.log(hasAnyOfClass("#test3", "test1"));
console.log([false, false, true].reduce((a, b) => a || b))