JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<span id="classy" class="big red underline">Alligators</span>
<div id="results"></div>

CSS

.big { font-size: 200%; }
.red { color: red; }
.underline { text-decoration: underline; }

JavaScript

var e = document.getElementById("classy"),
    results = document.getElementById("results");

function hasClass (e, classname) {
    return e.className.match(new RegExp('(\\s|^)' + classname + '(\\s|$)'));
}

   
function addClass (e, classname) {
    if (!hasClass(e, classname)) { e.className += " " + classname };
}

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

function displayClasses (e, t) {
    t.innerHTML += '"' + e.className + '"</br></br>'; 
}

removeClass(e, "non-existent");
displayClasses(e, results);

removeClass(e, "red");
displayClasses(e, results);

removeClass(e, "underline");
displayClasses(e, results);