Skip to content

Instantly share code, notes, and snippets.

@kurtisdunn
Created February 8, 2016 05:12
Show Gist options
  • Save kurtisdunn/668ff02c6bfc1c630201 to your computer and use it in GitHub Desktop.
Save kurtisdunn/668ff02c6bfc1c630201 to your computer and use it in GitHub Desktop.
Pure JS ClassList manipulation

##Pure JS ClassList Manipulation

Element.prototype.hasClass = function (className) {
return new RegExp(' ' + className + ' ').test(' ' + this.className + ' ');
};
Element.prototype.addClass = function (className) {
if (!this.hasClass(className)) {
this.className += ' ' + className;
}
return this;
};
Element.prototype.removeClass = function (className) {
var newClass = ' ' + this.className.replace(/[\t\r\n]/g, ' ') + ' ';
if (this.hasClass(className)) {
while (newClass.indexOf( ' ' + className + ' ') >= 0) {
newClass = newClass.replace(' ' + className + ' ', ' ');
}
this.className = newClass.replace(/^\s+|\s+$/g, ' ');
}
return this;
};
Element.prototype.toggleClass = function (className) {
var newClass = ' ' + this.className.replace(/[\t\r\n]/g, " ") + ' ';
if (this.hasClass(className)) {
while (newClass.indexOf(" " + className + " ") >= 0) {
newClass = newClass.replace(" " + className + " ", " ");
}
this.className = newClass.replace(/^\s+|\s+$/g, ' ');
} else {
this.className += ' ' + className;
}
return this;
};
/**
* Example of usage:
*/
var elem = document.getElementById('foo');
elem.addClass('bar');
alert(elem.hasClass('bar'));
elem.removeClass('bar');
alert(elem.hasClass('bar'));
elem.toggleClass('bar');
alert(elem.hasClass('bar'));
elem.addClass('bar1')
.addClass('bar2')
.removeClass('bar1')
.toggleClass('bar3');
alert(elem.classList);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment