jquery css () method usage Guide

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.