Example of adding, changing, and removing CSS styles in jQuery

CSS () method to change the CSS style

Css () methods are diverse in usage. There is one type that can accept two input parameters: style attributes and style values, which are separated by commas. For example, to change the link color, you can write the code as follows:

The code is as follows:	Copy code
$ ("# 61dh a" ).css ('color', '#123456 '); // Selector '$ ("# 61dh a")' indicates all links under the element whose ID is '# 61dh. //. Css ('color', '#123456'); sets the color to '#123456'

If you need to change multiple style attributes, you can first define the attribute variables and then assign them directly to the css () method. Example:

The code is as follows:	Copy code
Var mycss = { Background: '# EEE ', Width: '478px ', Margin: '10px 0 0 ', Padding: '5px 10px ', Border: '1px solid # CCC' }; $ ("# Result" cmd.css (divcss );

The above code first defines a CSS style attribute variable "mycss", similar to creating an external CSS file, and then using the css () method, assign the property to the DIV with ID '# result.
In addition, the css () method provided by jQuery can also view the css attribute values of an element. For example, to view the link color, the code is as follows:

The code is as follows:	Copy code
$ ("# 61dh a" ).css ("color ")

You will find that this is similar to the first example, but only one parameter (style attribute) is passed here ).
The last section describes how to set the link style (for example, color) after the mouse is crossed. You need to use the jQuery event class method-hover (). It is worth noting that the hover () method needs to define two functions, one is mouse stroke, and the other is behind the mouse. The specific method is as follows:

The code is as follows:	Copy code
$ ("# 61dh a" ).css ('color', '#123456 '); $ ("# 61dh a"). hover (function (){ Watermark (this).css ('color', '#999 '); }, Function (){ Watermark (this).css ('color', '#123456 '); }); // Use commas to separate the two functions of the hover () method.

Maybe you have noticed that this method is not concise. In fact, the jQuery hover () method is not used to change the CSS style. In practical use, we recommend that you use the add/remove CSS method to change the style of the link over the mouse.

Add/change/remove CSS classes

1. removeClass ()-remove the CSS class

The code is as follows:	Copy code
$ ("# Target"). removeClass ("oldClass "); // # Target indicates the ID of the element to be removed from the CSS class. // OldClass refers to the CSS class name

2. addClass ()-add CSS class

The code is as follows:	Copy code
$ ("# Target"). addClass ("newClass "); // # Target indicates the ID of the element to add a style. // NewClass refers to the CSS class name

3. toggleClass ()-add or remove a 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.

The code is as follows:	Copy code
$ ("# Target"). toggleClass ("newClass ") // If the element whose ID is "target" has defined the CSS style, it will be removed; // Conversely, the CSS class "newClass" will be assigned to this ID.

4. hasClass ("className")-determine whether CSS exists
In practice, we usually define these CSS classes first, and then use Javascript events to trigger (such as clicking a button) to change the page element style. In addition, jQuery provides a hasClass ("className") method to determine whether an element has been assigned to a CSS class. By the way, I would like to tell the beginner in front-end development that jquery is worth it. If you have time, study it.