JSFiddle - React, Tailwind, and code Playground
HTML
<div id="d1">Hello World</div>
CSS
.s1{
background-color:blue;
}
.s2{
color:white;
}
JavaScript
function AddClassToElement(elem,value){
var rspaces = /\s+/;
var classNames = (value || "").split( rspaces );
var className = " " + elem.className + " ",
setClass = elem.className;
for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
if ( className.indexOf( " " + classNames[c] + " " ) < 0 ) {
setClass += " " + classNames[c];
}
}
elem.className = setClass.replace(/^\s+|\s+$/g,'');//trim
}
var el = document.getElementById("d1");
setTimeout(function(){
AddClassToElement(el,"s1");
},333);
setTimeout(function(){
AddClassToElement(el,"s2");
},667);
function RemoveClassFromElement(elem,value){
var rspaces = /\s+/;
var rclass = /[\n\t]/g
var classNames = (value || "").split( rspaces );
var className = (" " + elem.className + " ").replace(rclass, " ");
for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
className = className.replace(" " + classNames[c] + " ", " ");
}
elem.className = className.replace(/^\s+|\s+$/g,'');//trim
}
setTimeout(function(){
RemoveClassFromElement(el,"s2");
},1000);
setTimeout(function(){
RemoveClassFromElement(el,"s1");
},1333);