How to add and remove classes in Javascript without jQuery

Question

Can anyone help me how I can able to add or remove classes in JavaScript without using jQuery? Any fast and secure way to do that?

Answer 1

You can use the below code for achieving it. Also, for the browsers which don't support classList.

function hasClass(el, className)

{

    if (el.classList)

        return el.classList.contains(className);

    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));

}

function addClass(el, className)

{

    if (el.classList)

        el.classList.add(className)

    else if (!hasClass(el, className))

        el.className += " " + className;

}

function removeClass(el, className)

{

    if (el.classList)

        el.classList.remove(className)

    else if (hasClass(el, className))

    {

        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');

        el.className = el.className.replace(reg, ' ');

    }

}

I hope this will help.

Want to know more about Java? Prefer this tutorial on Learn Java.

Want to become a Java Expert? Join Java Course now!!