jquery Modification Operation CSS Property implementation method

CSS () method has a variety of uses, we first understand the CSS () method basic knowledge.

The CSS () method sets or returns one or more style properties of the selected element.

Back to CSS Properties
To return the value of the specified CSS property, use the following syntax:

CSS ("PropertyName"); The following example returns the Background-color value of the first matching element:

Instance

$ ("P"). CSS ("Background-color");

Set CSS Properties

To set the CSS properties you specify, use the following syntax:

CSS ("propertyname", "value"); The following example sets the Background-color value for all matching elements:

Instance

$ ("P"). CSS ("Background-color", "yellow");

Set multiple CSS properties

To set up multiple CSS properties, use the following syntax:

CSS ({"PropertyName": "Value", "PropertyName": "Value",...}); The following example sets Background-color and font-size for all matching elements:

Instance

$ ("P"). css ({"Background-color": "Yellow", "font-size": "200%"});

If we want to change the link color, we can use the following code:

$ ("#61dh a"). css (' color ', ' #123456 ');

Here selector ' $ (' #61dh a ') ' represents all links under the element with Id ' #61dh '.
. css (' color ', ' #123456 '); To set the color to ' #123456 ' if we need to change multiple style attributes, we can first define the attribute variable and then directly assign the value to the CSS () method. Examples are as follows:

var divcss = {
Background: ' #EEE ',
Width: ' 478px ',
margin: ' 10px 0 0 ',
padding: ' 5px 10px ',
border: ' 1px solid #CCC '
};
$ ("#result"). CSS (DIVCSS);

Here we first define a CSS style attribute variable ' divcss ', which is similar to creating an external CSS file.
Then through the CSS () method provided by jquery, the attribute is assigned to the DIV with id ' #result '. In addition, the CSS () method provided by jquery can also be used to view the CSS property values of an element. For example, if we want to see the color of a link, we can use the following code:

$ ("#61dh a"). CSS ("color")

Similar to the first example, but here we only pass one argument (style attribute) The last thing to describe is how to set the link style (for example, color) after the mouse stroke. We can not use the selector directly select the mouse across the state of the link, which means $ ("a:hover") is not established. So we need to use the event class method provided by jquery-hover (). It is worth noting that the hover () method needs to define two functions, one is the mouse is out of date, and the other is after the mouse is drawn. The specific methods are as follows:

$ ("#61dh a"). css (' color ', ' #123456 ');
$ ("#61dh a"). Hover (function () {
$ (this). CSS (' color ', ' #999 ');
},
function () {
$ (this). CSS (' color ', ' #123456 ');
});

The two functions of the hover () method are separated by commas you may notice that this method is not concise (contrary to the purpose of jquery), in fact, jquery provides the hover () method is not used to change the CSS style. In practical use, it is recommended to use the Add/Remove CSS method to change the mouse across the link style.

There are some commonly used, such as addclass,hasclass we also come to see

The following table is the JQuery method associated with modifying a CSS class:

Name	Description	Instance
AddClass (classes)	Adds the specified class name for each matching element.	Add the ' selected ' class to the matching element: $ ("P"). AddClass ("selected");
Hasclass (Class)	Determines whether at least one element in the wrapper set has the specified CSS class applied	$ ("P"). Hasclass ("selected");
Removeclass ([classes])	Deletes all or a specified class from all matching elements.	Remove the ' selected ' class from the matching element: $ ("P"). Removeclass ("selected");
Toggleclass (Class)	Deletes (adds) a class if it exists (does not exist).	Switch the ' selected ' class for matching elements: $ ("P"). Toggleclass ("selected");
Toggleclass (class, switch)	Add a class when the switch is true, Delete class when switch is False	Toggle Highlight Style Every three clicks: var count = 0; $ ("P"). Click (function () { $ (this). Toggleclass ("Highlight", count++% 3 = 0); });

Using the above method, we can modify the CSS class of the element like a collection, and no longer have to parse the string manually. Note the addclass (Class) and removeclass ([classes]) Parameters can be passed in multiple CSS classes at a time, separated by spaces, such as:

$ ("#btnAdd"). Bind ("click",

Function (event) {

$ ("P"). addclass ("colorred borderblue");

}

);

The parameters of the Removeclass method are optional and all CSS classes are removed if the argument is not passed in:

$ ("P"). Removeclass ();

2. Modify CSS Styles

Also, when we want to modify an element's specific CSS style, that is, to modify the element property "style", jquery provides the appropriate method:

Name	Description	Instance
CSS (name)	Accesses the style properties of the first matching element.	Gets the value of the color style property of the first paragraph: $ ("P"). CSS ("color");
CSS (properties)	Sets a "name/value pair" object to the style properties of all matching elements. This is the best way to set a large number of style attributes on all matching elements.	Set the font color of all paragraphs to red and the background to blue: $ ("P"). CSS ({color: "#ff0011", Background: "Blue"});
CSS (name, value)	In all matching elements, set the value of a style property. Numbers are automatically converted to pixel values	Set all paragraph fonts to red: $ ("P"). CSS ("Color", "red");