hasClass/addClass/removeClass/toggleClass in pure javascript

replaceJquery

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);