After updating HTML to modern HTML5 and java-script to ECMAScript 6, we can say that web industry is now turning as a Self Dependent Platform. Flash and Java applets has been finished and older versions of IE and their troubles which always sucks have been completely vanished and now rememberes as Horror Stories. That’s why almost all new updates released by W3C has been adopted by all modern browser and they provide full support to web designer / developer.
Modern browsers have added classList which provides methods to make it easier to manipulate classes without needing a library:
document.getElementById("ID").classList.add('NewClass'); document.getElementById("ID").classList.remove('NewClass'); if (document.getElementById("ID").classList.contains('NewClass') ) document.getElementById("ID").classList.toggle('NewClass');
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.
document.getElementById("Id"), which is what the following examples use – you can of course obtain elements in other ways, and in the right situation may simply use
this instead – however, going into detail on this is beyond the scope of the answer.
To change all classes for an element:
To replace all existing classes with one or more new classes, set the className attribute:
document.getElementById("ID").className = "NewClass";
(You can use a space-delimited list to apply multiple classes.)
To add an additional class to an element:
To add a class to an element, without removing/affecting existing values, append a space and the new classname, like so:
document.getElementById("ID").className += " NewClass";
To remove a class from an element:
To remove a single class to an element, without affecting other potential classes, a simple regex replace is required:
document.getElementById("ID").className = document.getElementById("ID").className.replace( /(?:^|\s)NewClass(?!\S)/g , '' )
An explanation of this regex is as follows:
(?:^|\s) # Match the start of the string, or any single whitespace character NewClass # 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)
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("ID").className.match(/(?:^|\s)NewClass(?!\S)/) )
Assigning these actions to onclick events:
The first step to achieving this is by creating a function, and calling the function in the onclick attribute, for example:
(Very roughly, a library is a set of tools designed for a specific task, whilst a framework generally contains multiple libraries and performs a complete set of duties.)
$ here is the jQuery object.)
Changing Classes with jQuery:
$('#ID').addClass('NewClass'); $('#ID').removeClass('NewClass'); if ( $('#ID').hasClass('NewClass') )
In addition, jQuery provides a shortcut for adding a class if it doesn’t apply, or removing a class that does:
Assigning a function to a click event with jQuery:
or, without needing an id: