Modern browsers have added classList which provides methods to make it easier to manipulate classes without needing a library:
Unfortunately, these do not work in Internet Explorer prior to v10, though there is a shim to add support for it to IE8 and IE9, available from this page. It is, though, getting more and more supported.
To replace all existing classes with one or more new classes, set the className attribute:
(You can use a space-delimited list to apply multiple classes.)
To add a class to an element, without removing/affecting existing values, append a space and the new classname, like so:
To remove a single class to an element, without affecting other potential classes, a simple regex replace is required:
( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */
An explanation of this regex is as follows:
(?:^|\s) # Match the start of the string, or any single whitespace character
MyClass # The literal text for the classname to remove
(?!\S) # Negative lookahead to verify the above is the whole classname
# Ensures there is no non-space character following
# (i.e. must be end of string or a space)
The g flag tells the replace to repeat as required, in case the class name has been added multiple times.
The same regex used above for removing a class can also be used as a check as to whether a particular class exists:
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
The first step to achieving this is by creating a function, and calling the function in the onclick attribute, for example:
// Code examples from above
window.onload = function()
document.getElementById("MyElement").addEventListener( 'click', changeClass);
<button id="MyElement">My Button</button>
(Note that $ here is the jQuery object.)
if ( $('#MyElement').hasClass('MyClass') )
In addition, jQuery provides a shortcut for adding a class if it doesn't apply, or removing a class that does:
@mattstuehler 1) the phrase "better yet x" often means "better yet (you can) x". 2) To get to the heart of the matter, jQuery is designed to aid in accessing/manipulating the DOM, and very often if you need to do this sort of thing once you have to do it all over the place.
One bug with this solution: When you click on your button multiple times, it will add the Class of " MyClass" to the element multiple times, rather than checking to see if it already exists. Thus you could end up with an HTML class attribute looking something like this: class="button MyClass MyClass MyClass"
If you're trying to remove a class 'myClass' and you have a class 'prefix-myClass' the regex you gave above for removing a class will leave you with 'prefix-' in your className :O
Wow, three years and 183 upvotes and nobody spotted that until now. Thanks jinglesthula, I've corrected the regex so it wont incorrectly remove parts of class names. // I guess this is a good example of why a Framework (like jQuery) is worth using - bugs like this are caught and fixed sooner, and don't require changes to normal code.
Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).