jquery operation CSS style full record

$ (this). Click (function () {
if ($ (this). Hasclass ("zxx_fri_on")) {
$ (this). Removeclass ("zxx_fri_on");
}else{
$ (this). AddClass ("zxx_fri_on");
}
return false;
});

Add or remove a class name for an element collection

1. Using the AddClass () method

AddClass (names) adds the names specified by one or more class name to wrapped set. If you have more than one name, separate them with spaces, in short names is a string.

Returns the original wrapped set for the jquery chain operation.

Note: If there is a duplicate declaration in the added style declaration, who has a higher priority? See here for a look at the weights assigned to CSS.

2. Using the Removeclass () method

Removeclass (names) removes one or more of the class name specified by names. If you have more than one names, use spaces to separate them.

Returns the original wrapped set for the jquery chain operation.

3. Using the Toggleclass () method

Toggleclass (name) can only have one class name as a parameter this time. If the class already exists, remove it, or add it if it is not.

Returns the original wrapped set for the jquery chain operation.

Gets or sets the CSS style

1. Use the CSS (name, value) method

This method is used to set the CSS style to each element in the wrapped set.

Name is the CSS style property names;

Value can be (string|number|function), similar to the attr (name, value) method mentioned in the previous section, value, if it is a function, the ordinal of the element in the wrappsed set when passed to the function argument , the function internally uses this to point to the JavaScript DOM element that is being manipulated (strong enough). The return value of the function is the value of the CSS property to be set.

Like what:

$ (' div '). css (' font-size ', function (n) {
Return (n+1) + ' em ';

});

Increase the font size in the order in which the div appears in the page.

2. Using the CSS (properties) method

The parameter properties is an object that defines the class attribute name and value pair. This allows you to set up multiple CSS properties at once.

The return is still wrapped set to facilitate the jquery chain operation.

Such as:

$ (' div:eq (0) '). CSS ({

' Font-size ': ' 2em ',

' Color ': ' #cc00ff '

});

The more depressing thing is that the property name of this object must be quoted as a string, otherwise it cannot be recognized by the browser, attr () Similar methods do not need to do so.

The same object can also contain function, such as:

$ (' div '). css ({
' Font-size ': function (n)
{
Return (n+2) + ' em ';
}

});

3. Use the CSS (name) method

This method returns the value of the CSS property specified by name, and the value returned is a string, so there are some situations that need to be converted. This method can only return the specified CSS property value for the first element in the wrapped set.

such as: $ (' #firstDiv '). CSS (' font-size ') may return a string ' 16PX '.

By the way, if you want to get the class name of the specified element (if specified), use the JavaScript standard method, such as:

$ (' #firstDiv ') [0].classname

4. Use the width () and height () methods

1) the width () and height () methods without parameters return the width and height of the first element in the wrapped set, where a number (PX) is returned, without having to convert from a string.

2) WITDH (value) and height (value) with parameters specify the width height represented by value for each element in the wrapped set. Returns the wrapped set.

Value can be a number or a string. If it is number, the unit is PX.

such as: $ (' div '). Width (600); 600px

$ (' div '). Width (' 400mm '); 400mm

Hasclass (name) method

Determines whether any element in the wrapped set contains the class name specified by name, and name can be a string of multiple class names separated by a space. Returns True | False

Note: The difference between class name and class property name:

--Class name refers to the CSS name that defines the style, and a style definition contains many class property. For example, define a style called Ownstyle.

--Class Property name refers to the CSS attribute name in the CSS specification. Like Font-size,color and so on.

If you want all class names for an element, use the attr (' ClassName ') method or the JavaScript Dom property className. Note that when you split the returned string, you first determine whether the string is empty. Such as:

$.fn.getclassnames = function () {
if (name = This.attr ("ClassName")) {
Return Name.split ("");
}
else {
return [];
}
};

This code adds the extension function getclassnames () to jquery to get the class name array for the element.

jquery operation CSS style full record