##Pure JS ClassList Manipulation
Created
February 8, 2016 05:12
-
-
Save kurtisdunn/668ff02c6bfc1c630201 to your computer and use it in GitHub Desktop.
Pure JS ClassList manipulation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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