jQuery - get and set CSS class
, It can be easily operated by elements of CSS jQuery.
jQuery CSS operation
CSS jQuery has several methods of operation. We will learn about these below:
- addClass () - to add one or more classes selected elements
- removeClass () - Deletes one or more elements selected from the class
- toggleClass () - switch add / delete operation on the selected type of element
- css () - style property sets or returns
Examples of stylesheets
The following examples stylesheet used for all of the page:
.important
{
font-weight:
bold
;
font-size:
xx-large
;
}
.blue
{
color:
blue
;
}
jQuery addClass () method
The following example shows how to add a class attribute to the different elements. Of course, when you add a class, you can also select multiple elements:
Examples
$
(
"
button
"
)
.
click
(
function
(
)
{
$
(
"
h1,h2,p
"
)
.
addClass
(
"
blue
"
)
; $
(
"
div
"
)
.
addClass
(
"
important
"
)
;
}
)
;
You can also specify a plurality of classes in addClass () method:
Examples
$
(
"
button
"
)
.
click
(
function
(
)
{
$
(
"
body div:first
"
)
.
addClass
(
"
important blue
"
)
;
}
)
;
jQuery removeClass () method
The following example shows how to delete the specified class attributes in different elements:
Examples
$
(
"
button
"
)
.
click
(
function
(
)
{
$
(
"
h1,h2,p
"
)
.
removeClass
(
"
blue
"
)
;
}
)
;
jQuery toggleClass () method
The following example shows how to use jQuery toggleClass () method. The method of operation of the switching elements is selected from the Add / Remove class:
Examples
$
(
"
button
"
)
.
click
(
function
(
)
{
$
(
"
h1,h2,p
"
)
.
toggleClass
(
"
blue
"
)
;
}
)
;
jQuery css () method