jquery Modify Action CSS Property implementation method

In jquery we want to dynamically modify CSS properties as long as we use the CSS () method can be implemented, the following I will give you a detailed introduction of the students.

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

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

Return 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 specified CSS properties, 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 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 the selector ' $ ' ("#61dh a") ' represents all the links under the element with Id ' #61dh '.
. css (' color ', ' #123456 '); indicates that the color is set to ' #123456 ' if we need to change multiple style attributes, we can first define the attribute variables and then assign them directly 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, using the CSS () method provided by jquery, assign the attribute to the DIV with the 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 the link, we can use the following code:

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

Similar to the first example, but here we pass only one parameter (style attribute) and finally we'll show you how to set the link style after the mouse stroke (e.g., color). We cannot use the selector to directly select the link in the mouse over state, that is, $ ("a:hover") is not tenable. 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 of which is mouse stroke, and the other is after the mouse stroke. Here's how:

$ ("#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), but the hover () method provided by jquery is not intended to change the CSS style. In practice, it is recommended to use the Add/Remove CSS method to change the link style across the mouse.

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

The following table is a way to modify the CSS class-related jquery method:

Name	Description	Instance
AddClass (classes)	Adds the specified class name for each matching element.	Add the ' selected ' class to the matched element: $ ("P"). AddClass ("selected");
Hasclass (Class)	Determines if at least one element in the wrapper set has applied the specified CSS class	$ ("P"). Hasclass ("selected");
Removeclass ([classes])	Removes all or the specified class from all matching elements.	Remove the ' selected ' class from the matching element: $ ("P"). Removeclass ("selected");
Toggleclass (Class)	Delete (add) A class if it exists (does not exist).	Toggle the ' selected ' class for the matching element: $ ("P"). Toggleclass ("selected");
Toggleclass (class, switch)	When switch is true, the class is added, 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 method above, we can modify the CSS class of the element like a collection, and no longer have to parse the string manually. Note addclass (Class)  And removeclass ([classes])Parameters can be passed in multiple CSS classes at once, separated by a space, for example: $ ("#btnAdd"). Bind ("click", Function (event) {$ ("P"). addclass ("colorred borderblue");
The parameters of the Removeclass method are optional, and if you do not pass in the parameters, remove all CSS classes: $ ("P"). Removeclass (); 2. Modify CSS styleAlso when we want to modify an element's specific CSS style, that is, to modify the element property "style", jquery also provides the appropriate method:

Name	Description	Instance
CSS (name)	Accesses the style properties of the first matching element.	Gets the value of the first paragraph's Color style property: $ ("P"). CSS ("color");
CSS (properties)	Sets a "name/value pair" object to the style attribute of all matching elements. This is the best way to set a large number of style attributes on all matching elements.	Sets the font color for 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");

jquery Modify Action CSS Property implementation method