Have a helper available. Here are a number of methods for manipulating CSS classes. Some possibilities:
utils.toggleClass(div, 'red');
utils.addClass(div, 'red blink');
// utilizando timeout
utils.addClass(div, 'red tooltip', 2000);
utils.removeClass(array_div, 'hidden');
var utils = {
/**
* @param {Element|Array<Element>} element DOM node ou array de elementos.
* @param {String|Array<String>} classname Classe ou array de classes.
* Por exemplo: 'class1 class2' ou ['class1', 'class2']
* @param {Number|undefined} timeout Timeout para remover a classe (opcional).
*/
addClass: function(element, classname, timeout){
if(Array.isArray(element)){
element.forEach(function(each){
utils.addClass(each, classname);
});
return;
}
var
array = (Array.isArray(classname)) ? classname : classname.split(/\s+/),
i = array.length
;
while(i--){
if(!utils.hasClass(element, array[i])) {
utils._addClass(element, array[i], timeout);
}
}
},
_addClass: function(el, c, timeout){
// preferência para 'classList' se nativo
if (el.classList) {
el.classList.add(c);
} else {
el.className = (el.className + ' ' + c).trim();
}
if(timeout && utils.isNumeric(timeout)){
win.setTimeout(function(){
utils._removeClass(el, c);
}, timeout);
}
},
/**
* @param {Element|Array<Element>} element DOM node ou array de elementos.
* @param {String|Array<String>} classname Classe ou array de classes.
* Por exemplo: 'class1 class2' ou ['class1', 'class2']
* @param {Number|undefined} timeout Timeout para adicionar a classe (opcional).
*/
removeClass: function(element, classname, timeout){
if(Array.isArray(element)){
element.forEach(function(each){
utils.removeClass(each, classname, timeout);
});
return;
}
var
array = (Array.isArray(classname)) ? classname : classname.split(/\s+/),
i = array.length
;
while(i--){
if(utils.hasClass(element, array[i])) {
utils._removeClass(element, array[i], timeout);
}
}
},
_removeClass: function(el, c, timeout){
if (el.classList){
el.classList.remove(c);
} else {
el.className = (el.className.replace(utils.classRegex(c), ' ')).trim();
}
if(timeout && utils.isNumeric(timeout)){
win.setTimeout(function() {
utils._addClass(el, c);
}, timeout);
}
},
/**
* @param {Element} element DOM node.
* @param {String} classname Classe.
* @return {Boolean}
*/
hasClass: function(element, c) {
// preferência para 'classList' se nativo
return (element.classList) ?
element.classList.contains(c) : utils.classRegex(c).test(element.className);
},
/**
* @param {Element|Array<Element>} element DOM node ou array de elementos.
* @param {String} classname Classe.
*/
toggleClass: function(element, classname){
if(Array.isArray(element)) {
element.forEach(function(each) {
utils.toggleClass(each, classname);
});
return;
}
// preferência para 'classList' se nativo
if(element.classList) {
element.classList.toggle(classname);
} else {
if(utils.hasClass(element, classname)){
utils._removeClass(element, classname);
} else {
utils._addClass(element, classname);
}
}
},
isNumeric: function(str){
return /^\d+$/.test(str);
},
classRegex: function(classname) {
return new RegExp('(^|\s+)' + classname + '(\s+|$)');
}
};