jquery css () method usage Guide

In jquery we want to dynamically modify CSS properties we just use the CSS () method can be implemented, I would like to give you a detailed introduction.

Definitions and usage

The CSS () method returns or sets one or more style properties for the matching 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 code as follows:

$ (selector). CSS (name)

Name required. Specify the name of the CSS property. This parameter can contain any CSS properties. Like "Color".

Instance

Gets the value of the color style property of the first paragraph:

Copy code code as follows:

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

Set CSS Properties

Sets the specified CSS property for all matching elements.

Copy code code as follows:

$ (selector). CSS (Name,value)

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

Value is optional. Specify the value of the CSS property. This parameter can contain any CSS property values, such as "Red".

If an empty string value is set, the specified property is removed from the element.

Instance

Set the color of all paragraphs to red:

Copy code code as follows:

$ ("P"). CSS ("Color", "red");

Use functions to set CSS properties

Sets 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 indexed position of the element in the object collection, and value is the original property value.

Copy code code as follows:

$ (selector). CSS (Name,function (index,value))

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

Copy code code as follows:

function (Index,value)

A function that returns a new value for a CSS property.

Index-Optional. Accept the index position of the selector

OldValue-Optional. Accepts the current value of a CSS property.

Instance 1

Set the color of all paragraphs to red:

Copy code code as follows:

$ ("button"). Click (function () {

$ ("P"). CSS ("Color", function () {return "Red";});

});

Instance 2

Gradually increase the width of the div:

Copy code code as follows:

$ ("div"). Click (function () {

$ (this). CSS (

"Width", function (index, value) {return parsefloat (value) * 1.2;}

);

});

Set multiple CSS property/value pairs

Copy code code as follows:

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

Sets the 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.

{Property:value}

Necessary. Specify a name/value pair object to set as a style property.

This parameter can contain several pairs of CSS property names/values. For example {"Color": "Red", "font-weight": "Bold"}

Instance

Copy code code as follows:

$ ("P"). CSS ({

"Color": "White",

"Background-color": "#98bf21",

"font-family": "Arial",

"Font-size": "20px",

"Padding": "5px"

});

The above mentioned is the entire content of this article, I hope you can enjoy.