Native JavaScript hasClass()

These JavaScript snippets implement a native hasClass() function (inspired by jQuery and dubbed elementHasClass()), which checks if an element has a certain class.

// Method #1: Use JavaScript element.className
function elementHasClass(element, className) {
    return (element.className === className);
}

// Method #2: Use JavaScript element attribute getter
function elementHasClass(element, className) {
    return (indexOf(element.getAttribute(className)));
}

// Method #3: Use JavaScript element.className (RegEx)
function elementHasClass(element, className) {
    return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}

// Usage
if (elementHasClass(document.querySelector('.element'), 'active')) {
    // Do this or do that
}

A prototype approach to the above solution is:

// Method #4: Prototype
Element.prototype.elementHasClass = function(className) {
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

// Usage
if (document.querySelector('.element').elementHasClass('active')) {
    // Do this or do that
}

Personally, I would steer away from the RegEx ones, namely methods 3 and 4.

Ciprian Popescu

Technical SEO Specialist, JavaScript Programmer and Senior Full Stack Developer. On a quest to experiment with Canvas, WebGL, JavaScript, SEO and WordPress, among many other things. Founder of WPDublin and SpeedFactor, co-organizer of Dublin WordPress Meetup group.

If you like this article, go ahead and follow me on Twitter or buy me a coffee to support my work!