jQuery's css() method usage guide_jquery

Definition and usage

The

css() method returns or sets one or more style attributes of the matched element.

Return CSS property value

Returns the CSS property value of the first matching element.

Note: Shorthand CSS properties (such as "background" and "border") are not supported when used to return a value.

Copy code The code is as follows:

$(selector).css(name)

name required. Specifies the name of the CSS property. This parameter can contain any CSS property. For example "color".

Example
Get the value of the color style attribute of the first paragraph:

Copy code The code is as follows:

$("p").css("color");

Set CSS properties

Sets the specified CSS property on all matching elements.

Copy code The code is as follows:

$(selector).css(name,value)

name required. Specifies the name of the CSS property. This parameter can contain any CSS property, such as "color".

value optional. Specifies the value of a CSS property. This parameter can contain any CSS property value, such as "red".

If the empty string value is set, removes the specified attribute from the element.

Example
Set the color of all paragraphs to red:

Copy code The code is as follows:

$("p").css("color","red");

Use functions to set CSS properties

Set the value of the style attribute in all matching elements.
This function returns the property value to be set. Accepts two parameters, index is the index position of the element in the object collection, and value is the original attribute value.

Copy code The code is as follows:

$(selector).css(name,function(index,value))

name required. Specifies the name of the CSS property. This parameter can contain any CSS property, such as "color".

Copy code The code is as follows:

function(index,value)

Specifies a function that returns the new value of a CSS property.
index - optional. Accepts the index position of the selector
oldvalue - optional. Accepts the current value of a CSS property.

Example 1
Set the color of all paragraphs to red:

Copy code The code is as follows:

$("button").click(function(){
$("p").css("color",function(){return "red";});
});

Example 2
Gradually increase the width of the div:

Copy code The code is as follows:

$("div").click(function() {
$(this).css(
"width", function(index, value) {return parseFloat(value) * 1.2;}
);
});

Set multiple CSS property/value pairs

Copy code The code is as follows:

$(selector).css({property:value, property:value, ...})

Sets the name/value pair object as the style attribute of all matching elements.
This is the best way to set a large number of style properties on all matching elements.

{property:value}
Required. Specifies the name/value pair object to be set as a style attribute.
This parameter can contain several CSS property name/value pairs. For example {"color":"red","font-weight":"bold"}

Example

Copy code The code is as follows:

$("p").css({
"color":"white",
"background-color":"#98bf21",
"font-family":"Arial",
"font-size":"20px",
"padding":"5px"
});

The above is the entire content of this article, I hope you all like it.