Adding and removing CSS classes to dynamically change their style

jQuery comes bundled with class manipulation functions in order to allow developers to easily alter the style of any HTML element.

Getting ready

For element style changes to be of any use, we first need to declare some styles within an HTML document. The following HTML code has a range of styles and elements that we can work with to illustrate this functionality of jQuery:

<!DOCTYPE html> <html> <head> <title>Add and remove CSS classes to dynamically change their style</title> <script src="jquery.min.js"></script> <script></script> <style type="text/css"> .green { background-color: #008000; color: #FFFFFF; } .red { background-color: #FF0000; color: #FFFFFF; } .yellow { background-color: ...

Get jQuery 2.0 Development Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.