JQuery sets, appends, removes, and switches styles.

JQuery sets, appends, removes, and switches styles.

This document describes how to set, append, remove, and switch styles using JQuery. Share it with you for your reference. The specific analysis is as follows:

With JQuery, the style operations of elements become quite simple. The following describes how to use JQuery to obtain, set, append, delete, and perform other operations on element styles.

Getting and setting styles

You can use the attr () method to obtain and set the class. For example, if you use the attr () method to obtain the class of the p element, the JQuery code is as follows:

Var p_class = $ ("p"). attr ("class"); // obtain the class of the p element

Use the attr () method to set the class of the p element. The JQuery code is as follows:

$ ("P"). attr ("'class", "high"); // set the class of the p element to "high"

In most cases, it replaces the original class with the new class, rather than appending the new class on the basis of the original.

Append Style

What is append class? If the original class of the p element is myClass, after a class named high is appended, the class attribute becomes "myClass high", that is, the superposition of the myClass and high styles. JQuery provides a special addClass () method to append styles. To make the example easier to understand, add another style group to the style label:

.high{ color:red; }.another{ font-style:italic; color:blue; }

Add a "APPEND class" button to the webpage. The event code of the button is as follows:

$ ("# Btn_3"). click (function () {$ ("# nm_p"). addClass ("another"); // append style });

Finally, when you click the append class button, the p element style changes to italic, and the previous red font changes to blue. In this case, the p element has two class values, namely, "high" and "another ". There are two rules in CSS.

1. if multiple class values are added to an element, it is equivalent to merging their styles.
2. If different classes have the same style attribute set, the latter overwrites the former.

In the preceding example, the following style is added to the p element:

Color: red;/* set the font color to red */font-style: italic; color: blue;

There are two "color" attributes in the above style, and the "color" attribute will overwrite the previous "color" attribute, therefore, the final value of the "color" attribute is "blue" instead of "red ".

Remove Style

If you want to delete a value of class when you click a button, you can use the removeClass () method opposite to addClass, it is used to delete all or specified classes from matching elements. For example, you can use the following JQuery code to delete the class with the value of "high" in the p element:

$ ("P"). removeClass ("high"); // remove the class whose value is "high" in the p element

To delete both classes of the p element, you must use the removeClass () method twice. The Code is as follows:
Copy codeThe Code is as follows: $ ("p"). removeClass ("high"). removeClass ("another ");

JQuery provides a simpler method. You can delete multiple class names by spaces. The Code is as follows:
Copy codeThe Code is as follows: $ ("p"). removeClass ("high another ");

In addition, one feature of the removeClass () method can be used to achieve the same effect. When it does not contain parameters, all class values will be deleted. The JQuery code is as follows:

$ ("P"). removeClass (); // remove all classes of the p element

Change style

There is a method toggle () in JQuery. The JQuery code is as follows:

ToggleBtn. toggle (function () {// element display code ③}, function () {// element hidden code ④ })

The toggle () method is used to execute functions ③ and ④ alternately. If an element is displayed, hide it. If the element is hidden, it is displayed. In this case, the toggle () method controls repeated switching of behavior.

In addition, JQuery also provides a toggleClass () method to control repeated switching on styles. If the class name exists, delete it. If the class name does not exist, add it. For example, the toggleClass () method is used to operate the p element.

$ ("P"). toggleClass ("another"); // repeated switching class name "another"

When you continuously click the "Switch style" button, the class value of the p element will be repeated between "myClass" and "myClass another.

Determines whether a style exists.

HasClass () can be used to determine whether the element contains a class. If yes, true is returned; otherwise, false is returned. For example, you can use the following code to determine whether the p element contains a class with "another:
Copy codeThe Code is as follows: $ ("p"). hasClass ("another ");

This method is generated to enhance the readability of the Code. In JQuery, the is () method is actually called to complete this function. This method is equivalent to the following code:
Copy codeThe Code is as follows: $ ("p"). is (". another"); // is ("." + class );

I hope this article will help you with jQuery programming.