Three ways for jQuery to manipulate element css styles_jquery

We often use Javascript to change the style of page elements. One way is to change the CSS class (Class) of the page element. In traditional Javascript, we usually do this by processing the classname attribute of HTML Dom; jQuery provides three methods to achieve this function, although they The idea is similar to the traditional method, but it saves a lot of code. Still the same sentence - "jQuery makes JavaScript code concise!"

1. addClass() - Add CSS class
$("#target").addClass("newClass");
//#target refers to the ID of the element that needs to be styled
//newClass refers to the name of the CSS class
2. removeClass() - removes the CSS class
$("#target" ).removeClass("oldClass");
//#target refers to the ID of the element whose CSS class needs to be removed
//oldClass refers to the name of the CSS class
3. toggleClass() - Add or remove a CSS class: If the CSS class already exists, it will be removed; conversely, if the CSS class does not exist, it will be added.
$("#target").toggleClass("newClass")
//If the element with ID "target" has a CSS style defined, it will be removed;
//On the contrary, CSS The class "newClass" will be assigned this ID.

In actual application, we often define these CSS classes first, and then change the page element style through Javascript event triggering (such as clicking a link). In addition, jQuery also provides a method hasClass("className") to determine whether an element has been assigned a CSS class.

Below is a complete example.