If you are working with plain Javascript but still want to have some advantajes when dealing with element classes (element.className) you can write a small $ function like this:
-
var $ = function(element) {
-
this.element = element;
-
this.getClasses = function() {
-
return this.element.className.replace(/\s+/,' ').split(' ');
-
}
-
this.hasClass = function(className) {
-
var classes = this.getClasses();
-
return (classes.indexOf(className) > -1);
-
}
-
this.addClass = function(className) {
-
if (!this.hasClass(className)) {
-
this.element.className += (this.element.className ? ' ' :'') + className;
-
}
-
}
-
this.removeClass = function(className) {
-
if (this.hasClass(className)) {
-
var classes = this.getClasses();
-
classes.splice(classes.indexOf(className), 1);
-
this.element.className = classes.join(' ');
-
}
-
}
-
return this;
-
}
Then, once you have a variable that contains a DOM element, you can use it like this:
-
$(mydomelement).addClass('test');
-
if ($(mydomelement).hasClass('test')) alert('element has class test');
-
$(mydomelement).removeClass('test');
-
var classes = $(mydomelement).getClasses();
This will let you work with elements that have multiple classes very easily.
