It is also possible to change the style of page elements using Javascript, but is there a simpler way? The answer is yes. Now that jQuery has made JS code lose a lot, it fulfills the sentence: "jQuery makes JavaScript code concise!" Go back to the point, let's see how jquery adds and removes CSS classes:
1. removeClass() - Remove CSS class
$("#target").removeClass("oldClass");
//#target refers to the ID of the element that needs to be removed from the CSS class//oldClass Refers toCSSThe name of the class
() - Add CSS class
$("#target").addClass("newClass");
//#target refers to the ID of the element that needs to be added to the style//newClass Refers toCSSThe name of the class
3. toggleClass() - Add or remove CSS class: If the CSS class already exists, it will be removed; on the contrary, if the CSS class does not exist, it will be added.
$("#target").toggleClass("newClass")
//If the element with ID "target" has already defined the CSS style, it will be removed;//on the contrary，CSSkind“newClass”Will be assigned to thisID
("className") - determine whether CSS already exists
In actual use, we usually define these CSS classes first, and then change the page element style through Javascript event triggering (such as clicking a button). In addition, jQuery also provides a method hasClass("className"), which is used to determine whether an element has been assigned to a CSS class. By the way, let me tell newbies in front-end development that jquery is worth having, so I will study it carefully when I have time.