jQuery | Get and Set CSS Classes
jQuery has various methods for CSS manipulation which are listed below:
- addClass(): Adds one or more classes to the selected elements
- removeClass(): Removes one or more classes from selected elements
- toggleClass(): Toggles between adding or removing classes from selected elements
- css(): Sets or returns style attribute
- jQuery addClass() Method: The addClass is used to add more property to each selected element. It can also be used to change the property of the selected element.
Syntax:
$(content).addClass(target)
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
jQuery addClass() Method
</
title
>
<
script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"
>
</
script
>
<!-- Script to use addClass method -->
<
script
>
$(document).ready(function() {
$("button").click(function() {
$("h1, h2, p").addClass("green");
$("div").addClass("abs");
});
});
</
script
>
<
style
>
.abs {
font-weight: bold;
font-size: xx-large;
}
.green {
color:green;
}
</
style
>
</
head
>
<
body
>
<
h1
>GFG</
h1
>
<
h2
>w3wiki</
h2
>
<
p
>This is gfg.</
p
>
<
div
>This is some different text.</
div
><
br
>
<
button
>Add classes to elements</
button
>
</
body
>
</
html
>
Output:
- Before click on the button:
- After click on the button:
- Before click on the button:
- jQuery removeClass() Method: This method is used to remove a specific class attribute from different elements.
Syntax:
$(content).removeClass(target)
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"
>
</
script
>
<!-- Script to use removeClass method -->
<
script
>
$(document).ready(function() {
$("button").click(function() {
$("h1, h2, p").removeClass("green");
});
});
</
script
>
<
style
>
.important {
font-weight: bold;
font-size: xx-large;
}
.green {
color:green;
}
</
style
>
</
head
>
<
body
>
<
h1
class
=
"green"
>Heading 1</
h1
>
<
h2
class
=
"green"
>GFG</
h2
>
<
p
class
=
"green"
>welcome to w3wiki.</
p
>
<
p
>This is other paragraph.</
p
>
<
button
>Remove class from elements</
button
>
</
body
>
</
html
>
Output:
- Before click on the button:
- After click on the button:
- Before click on the button:
- jQuery toggleClass() Method: This method toggles between adding or removing classes from selected elements.
Syntax:
$(content).toggleClass(target)
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"
>
</
script
>
<!-- Script to use toggleClass() method -->
<
script
>
$(document).ready(function() {
$("button").click(function() {
$("h1, h2, p").toggleClass("green");
});
});
</
script
>
<
style
>
.green {
color:lightgreen;
}
</
style
>
</
head
>
<
body
>
<
h1
>Heading</
h1
>
<
h2
>gfg</
h2
>
<
p
>welcome to gfg</
p
>
<
p
>This is other paragraph.</
p
>
<
button
>Toggle class</
button
>
</
body
>
</
html
>
Output:
- Before click on the button:
- After click on the button:
- Before click on the button:
- jQuery css() Method: This method sets or returns one or more style properties for selected elements.
Syntax:$(content).css(target)
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"
>
</
script
>
<!-- Script to use css() method -->
<
script
>
$(document).ready(function() {
$("button").click(function() {
alert("Background color = "
+ $("p").css("background-color"));
});
});
</
script
>
</
head
>
<
body
>
<
h2
>This is a heading</
h2
>
<
p
style
=
"background-color:green;"
>This is a gfg.</
p
>
<
p
style
=
"background-color:lightgreen"
>This is a gfg.</
p
>
<
p
style
=
"background-color:blue"
>This is a gfg.</
p
>
<
button
>background-color of p</
button
>
</
body
>
</
html
>
Output:
- Before click on the button:
- After click on the button:
- Before click on the button:
Contact Us