![]() The first step to achieve this is by creating the function and calling the function in the onclick attribute.īut, this will not be required to have this code in script tags, it also includes the JavaScript in a distinct file may be more appropriate. Another step is to move the onclick event out of the HTML and into JavaScript, for example using addEventListenerĭocument.getElementById("MyElement").addEventListener( 'click', changeClass) It's possible to write JavaScript directly inside the HTML event attributes (such as onclick="this.className+=' M圜lass'") but this is not recommended behaviour. For larger applications, more maintainable code can be achieved by separating HTML markup from JavaScript interaction logic. If ( document.getElementById("MyElement").className.match(/(?:^|\s)M圜lass(?!\S)/) )Īssigning the above actions to on click events: Try the code given below to check if the 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 or not: Here, the g flag will tell the replace to repeat as required, in case the class name has been added multiple times. ![]() # Ensures that there is no non-space character following (?!\S) # Negative lookahead to verify the above is the whole classname ![]() M圜lass # The literal text for the classname to remove (?:^|\s) # This matches the start of the string, or any single whitespace character The explanation for the regex is as follows: * Code wrapped for readability - above is all one statement */ To remove a class from an element and to remove a single class to an element, without affecting other potential classes, a simple regex replace is required like this:ĭocument.getElementById("MyElement").className =ĭocument.getElementById("MyElement").className.replace To add an additional class to an element and to add the class to an element, without removing/affecting existing values, append a space and the new classname, this way:ĭocument.getElementById("MyElement").className += " M圜lass" (You should use a space-delimited list to apply multiple classes.) To change all classes for an element and to replace all the existing classes with one or more new classes, set the className attribute like this:ĭocument.getElementById("MyElement").className = "M圜lass" The standard JavaScript way to select an element is using document.getElementById("Id"), this is what the following examples use but you can obtain elements in other ways. Simple cross-browser solution is as follows If ( document.getElementById("MyElement").ntains('M圜lass') )ĭocument.getElementById("MyElement").classList.toggle('M圜lass') īut, the above code will 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. ![]() Modern browsers will be added in classList which provides methods to make it easier to manipulate classes without needing the library:ĭocument.getElementById("MyElement").classList.add('M圜lass') ĭocument.getElementById("MyElement").classList.remove('M圜lass') Techniques for changing classes in Modern HTML5 is as follows: ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |