The jquery css () method

css()function is used to set or return the value of the CSS style property of the element that the current jquery object matches .

The function belongs to an jQuery object (instance). If you need to delete the specified CSS property, use this function to set its value to an empty string ("").

Grammar

css()There are two ways to use the function:

Usage One :

Jqueryobject.  CSS([,])     

Sets or returns propertyName the value of the specified CSS property.

• If a parameter is specified value , the propertyName value of the Set CSS property is value ;
• If no argument is specified value , the value of the CSS property is returned propertyName .

Usage two :

Jqueryobject.  CSS()   

Sets the value of any number of properties in the form of an object. objectEach property of the object corresponds propertyName to the value of the property value .

Attention:
1. If the argument is omitted value , the property value is obtained, and if the parameter is specified, the value of the property is set.
2 css() . All the "set" actions of the function are for each element that the current jquery object matches, and all read operations are only for the first matched element.

Parameters

Find the corresponding parameter based on the parameter name defined in the previous syntax section .

	description
propertyname	string/array type specifies the name of the CSS property (for setting or returning), or an array of CSS property names (for return only).
value	optional/string/number/function The property value specified by the type, or The function that returns the value of the property.
object	object type specifies an object that encapsulates multiple key-value pairs and sets multiple properties at the same time.

JQuery 1.4 Added support: The parameter value can be a function that css() will execute the function according to all the elements of the match, and the pointer in the function this will point to the corresponding DOM element. css()two parameters are also passed to the function: The first parameter is the index of the element in the matching element, and the second parameter is the propertyName current value of the element's CSS property. The return value of the function is the value set for the element's CSS property propertyName .

JQuery 1.9 Added support: If the Get action (get only), the parameter propertyName can also be an array of multiple CSS property names, css() returning multiple CSS properties as objects (the object's property name corresponds to the CSS property name, The property value corresponds to the CSS property value).

return value

css()The return value of a function is any type, and the type of the return value depends on whether the current css() function performs a set action or a read operation.

If the css() function performs a set operation, the current jquery object itself is returned, and if it is a read operation, the value of the property read to is returned.

If the current jquery object matches more than one element, the function returns the value of the property, css() whichever is the first one of the matching elements. If the element does not have a specified property, it is returned undefined .

Precautions

1 value . If the argument is an empty string (""), the CSS property is deleted.

2, for the CSS properties of multiple words, you can use its CSS format ("-") or DOM format (camel style), jquery can understand. For example background-color , you can propertyName set the background-color or backgroundColor . It is recommended to take the hump (the bottom of the jquery is also obtained through the DOM, and the properties of the DOM element are named Camel).

3. Sometimes the value of the CSS property you get is not exactly the same as the value you set in the style sheet. For example, some property values that represent dimensions that you might set in the style sheet are EM, px, ex, or%, but jquery gets the value of the browser-computed CSS property, which in most cases is pixels. In addition, different browsers have inconsistent color text representations for color () property values, in white , for example, the browser may return white,#FFF,#ffffff,RGB (255,255,255) And, of course, they all logically represent white.

4, for some of the sketched CSS properties, such as margin,padding,background,border. Although some browsers provide this functionality, the results are not guaranteed, and some browsers do not support them. In the case of margin , you may need to obtain it separately, and css("marginTop") css("marginRight") so on. Starting with jquery 1.9, you can pass in an array to get multiple CSS properties (returned as objects).

Example & Description

Take the following HTML code as an example:

<p Id="N1" Style="Font-Size: 16px;Font-Weight:Bold;Color: #333; margin:10px 5px;">codeplayer</p> 
 <p  id= "N2" style=font- size: 14px; Font-weight:bold;< Span class= "PLN" > Color:  #aacd12; padding:5px; border:1px Solid #000;  "> focus on programming development technology sharing </P>   

We write the following jquery code:

Var$n 1=$("#n1");
Var$n 2=$("#n2");

Document.Writeln($n 1.Css("FontSize" /* or "font-size" */ ) );
Document.Writeln($n 1.Css("Margin") ); chrome:10px 5px | No output under Firefox and IE
Document.Writeln($n 1.Css("MarginTop") ); 10px (supported by all browsers)
Document.Writeln($n 1.Css("MarginLeft") ); 5PX (supported by all browsers)

Remove bold from N1
$n 1.Css("FontWeight", "Normal");

Change the background color and font of N2
$n 2.Css( {BackgroundColor: "#efefef", "Font-family": ' Microsoft Yahei ' } );

VarStyleobj=$n 2.Css( ["Paddingtop", "Paddingright", "Paddingbottom", "Paddingleft"] );
Document.Writeln(Styleobj.Paddingtop); 5px
Document.Writeln(Styleobj.Paddingright); 5px

Delete N2 's Border property
$n 2.Css("Border", "");

Change the Font-weight property of all P elements
//if it is bold, it is not bold and bold  
 $ ( "P" css (, Span class= "KWD" >function (index, value< Span class= "pun" >) { 
     return value ==  "bold"  ?  "normal"  :  "bold"  });           

The jquery css () method