jQuery's css() method usage example_jquery

The example in this article describes the usage of jQuery’s css() method. Share it with everyone for your reference. The specific analysis is as follows:

This method returns or sets one or more style attributes of the matched element.

Grammar structure:

Grammar 1:
Get the attribute value of the specified style attribute.
Take the style attribute name as parameter. For example:

Copy code The code is as follows:

$("div").css("color")

The above code can obtain the font color value of the div.
Code example:

Copy code The code is as follows:

Script Home

Click to see the effect

Click the button here to pop up the font color value set for the div.

Grammar 2:

Set a style attribute value for all matching elements. For example:

Copy code The code is as follows:

$("div").css("color","red")

The above code can set the font color of all divs to red. Everyone should pay attention to the writing format. The attribute name and attribute value should be wrapped in banks and separated by commas. If the attribute value is a number, you can remove the quotation marks, for example:

Copy code The code is as follows:

$("div").css("font-size",20)

Example code:

Copy code The code is as follows:

Check the changes carefully

Check the changes carefully

Click to see the effect

In the above code, clicking the button can set the text color in the div to red.

Grammar 3:

Use the "attribute name/value" object to set the style attribute for all matching elements. For example:

Copy code The code is as follows:

$("div").css({color:"red"})

The above code can set the font color of all div elements to red. You can also set multiple sets of attributes for matching elements at one time using the "attribute name/value" object method. For example:

Copy code The code is as follows:

$("div").css({color:"red",fontSize: 20})

The above code can set the font color and size in the div to red and 20px respectively. When setting the font size without a unit, the default unit is px. Everyone should pay attention to the format. At this time, the attribute name cannot be wrapped in quotation marks, and the attribute value needs to be wrapped in quotation marks. However, if the attribute value is a number, the quotation marks can be omitted. Special attention should be paid to the fact that attribute names such as font-size and background-color should remove the horizontal bar (-) in the middle, and the first letter of the second word should be capitalized. For example, font-size should be written as fontSize, and background-color should be written as backgroundColor. .

Copy code The code is as follows:

Check the changes carefully

Check the changes carefully

Click to see the effect

In the above code, clicking the button can modify the text color and font size in the div.

I hope this article will be helpful to everyone’s jQuery programming.