Shulou(Shulou.com)06/01 Report--

This article is about how jQuery manipulates CSS elements. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

JQuery operation CSS

With jQuery, you can easily manipulate CSS elements. JQuery has several ways to perform CSS operations:

AddClass ()-add one or more classes to the selected element

RemoveClass ()-removes one or more classes from the selected element

ToggleClass ()-switch between adding / removing classes for selected elements

Css ()-sets or returns style properties

JQuery addClass () method

The following example shows how to add class attributes to different elements. Of course, when adding a class, you can also select multiple elements:

$(document) .ready (function () {$("button") .click (function () {$("h _ 2mae h _ 3 paper p"). AddClass ("blue"); $("div"). AddClass ("important");}); .important {font-weight: bold; font-size: xx-large;}. Blue {color: blue;} title 1 heading 2

This is a paragraph.

This is another paragraph.

This is a very important text!

To add classes to an element, you can also specify multiple classes in the addClass () method: $("button") .click (function () {$("# div") .addClass ("important blue");})

JQuery removeClass () method

The following example shows how to delete the specified class attribute from different elements:

$(document) .ready (function () {$("button") .click (function () {$("H2 bold; font-size H3 paper p"). RemoveClass ("blue");}); .important {font-weight: bold; font-size: xx-large;}. Blue {color: blue;} heading 1 heading 2 this is a paragraph.

This is another paragraph.

Remove a class from an element

JQuery toggleClass () method

The jQuery toggleClass () method, which switches between adding / removing classes for the selected element:

$(document) .ready (function () {$("button") .click (function () {$("h _ 2mae h ~ h _ 3 paper p"). ToggleClass ("blue");}); .blue {color: blue;} title 1 title 2

This is a paragraph.

This is another paragraph.

Toggle CSS classes

JQuery css () method

The css () method sets or returns one or more style properties of the selected element.

Css () returns the CSS property

To return the value of the specified CSS property, use the following syntax:

Css ("propertyname")

The following example returns the background-color value of the first matching element:

$(document) .ready (function () {$("button") .click (function () {alert ("Background color =" + $("p"). Css ("background-color"));}); this is the title and this is a paragraph.

This is a paragraph.

This is a paragraph.

Returns the background color of the p element

Css () sets the CSS property

To set the specified CSS property, use the following syntax:

Css ("propertyname", "value")

The following example sets the background-color value for all matching elements:

$(document) .ready (function () {$("button") .click (function () {$("p"). Css ("background-color", "yellow");}); this is the title and this is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

Set the background color of the p element

Css () sets multiple CSS properties

To set multiple CSS properties, use the following syntax:

Css ({"propertyname": "value", "propertyname": "value",...})

The following example sets background-color and font-size for all matching elements:

$(document) .ready (function () {$("button") .click (function () {$("p"). Css ({"background-color": "yellow", "font-size": "200%"});}); this is the title, this is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

Set multiple styles for the p element. Thank you for reading! This is the end of this article on "how jQuery operates on CSS elements". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.