JQuery operates the css style of the element_jquery

We often use Javascript to change the style of page elements. One way is to change the page meta

Element CSS class (Class), in traditional Javascript, we usually process HTML

Dom’s classname feature is implemented; jQuery provides three methods to implement this function,

Although they have the same ideas as traditional methods, they save a lot of code. Still the same sentence –

“jQuery makes JavaScript code concise!”

1. addClass() – Add CSS class

Copy code The code is as follows:

$(“#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() – Remove CSS class

Copy code The code is as follows:

$(“#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 CSS class: If the CSS class already exists, it will be removed;

In contrast, if the CSS class does not exist, it will be added.

Copy code The code is as follows:

$("#target").toggleClass("newClass")
//If the element with ID "target" has a CSS style defined, it will be removed;
//On the contrary, the CSS class "newClass" will be assigned to the ID.

In actual application, we often define these CSS classes first, and then trigger them through Javascript events

Post (such as clicking on a link) to change the page element style. In addition, jQuery also provides a method

The

method hasClass(“className”) is used to determine whether an element has been assigned a CSS class.

Below is a complete example.

Copy code The code is as follows:

Hahaha

<script> <br> Function btnClick(){ <br> //$(“#soccer”).removeClass(“up”); <br> $(“#soccer”).toggleClass(“up”); <br> //$(“p:first”).removeClass(“intro”); <br> }  <br> </script>






The above is the entire content of this article about jQuery operating CSS styles. I hope you will like it.