Add Or Remove Css Class With Javascript - Gists · GitHub

From: StackOverflow

To change all classes for an element:

document.getElementById("MyElement").className = "MyClass";

To add an additional class to an element:

document.getElementById("MyElement").className += " MyClass";

To remove a class from an element:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace( /(?:^|\s)MyClass(?!\S)/g , '' )

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.

To check if a class is already applied to an element:

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

Assigning these actions to onclick events:

Whilst it is possible to write JavaScript directly inside the HTML event attributes (such as onclick="this.className+=' MyClass'") this is not recommended behaviour. Especially on larger applications, more maintainable code is achieved by separating HTML markup from JS interaction logic.

The first step to achieving this is by creating a function, and calling the function in the onclick attribute, for example: <script type="text/javascript"> function changeClass() { // code examples from above } </script> ... <button onclick="changeClass()">My Button</button>

(It is not required to have this code in script tags, this is simply for brevity of example, and including the JS in a distinct file may be more appropriate.)

The second step is to move the onclick event out of the HTML and into JavaScript, for example using addEventListener

`<script type="text/javascript"> function changeClass() { // code examples from above }

window.onload = function() { document.getElementById("MyElement").addEventListener( 'click' , changeClass ); } </script> ... My Button`

(Note that the window.onload part is required so that the contents of that function are executed after the HTML has finished loading - without this, the MyElement might not exist when the JS is called, so that line would fail.)

JavaScript Frameworks and Libraries

Changing Classes with jQuery:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

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:

$('#MyElement').toggleClass('MyClass');

Assigning a function to a click event with jQuery:

$('#MyElement').click(changeClass);

or, without needing an id:

$(':button:contains(My Button)').click(changeClass);

HTML5 Techniques for changing classes

Modern browsers have added classList which provides methods to make it easier to manipulate classes without needing a library: document.getElementById("MyElement").classList.add('class');

document.getElementById("MyElement").classList.remove('class');

if ( document.getElementById("MyElement").classList.contains('class') ) document.getElementById("MyElement").classList.toggle('class');

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.