JSFiddle - React, Tailwind, and code Playground
HTML
<p class="hello">Lorem ipsum dolor sit amet, consectetur</p>
<p class="hello">Sapiente in delectus dolorem reiciendis ditii</p>
<p class="hello">Quis dolore autem voluptatibus repellat</p>
JavaScript
function addClassToElements(nameClass, addThis) {
var classes = document.getElementsByClassName(nameClass);
for(var i = 0; i < classes.length; i++) {
var oneClass = classes[i];
setTimeout(oneClass.classList.add(addThis), 2000);
}
}
addClassToElements("hello", "red");
function classList(e) {
if(e.classList) return e.classList;
else return new CSSClassList(e);
}
function CSSClassList(e) { this.e = e; }
CSSClassList.prototype.contains = function(c) {
if(c.length === 0 || c.indexOf(" ") != -1)
throw new Error("Нвдопустимое имя класса " + c);
var classes = this.e.className;
if(!classes) return false;
if(classes === c) return true;
return classes.search("\\b" + c + "\\b") != -1;
};
CSSClassList.prototype.add = function(c) {
if(this.contains(c)) return;
var classes = this.e.className;
if(classes && classes[classes.length-1] != " ")
c = " " + c;
this.e.className += c;
}
CSSClassList.prototype.remove = function(c) {
if(c.length === 0 || c.indexOf(" ") != -1)
throw new Error("Недопустимое имя класса " + c);
var pattern = new RegExp("\\b" + c +"\\b\\s*", "g");
this.e.className = this.e.className.replace(pattern, "");
};
CSSClassList.prototype.toggle = function(c) {
if(this.contains(c)) {
this.remove(c);
return false;
} else {
this.add(c);
return true;
}
};