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><scriptsrc=</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>GeeksForGeeks</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><scriptsrc=</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><h1class="green">Heading 1</h1><h2class="green">GFG</h2><pclass="green">welcome to GeeksForGeeks.</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><scriptsrc=</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><scriptsrc=</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><pstyle="background-color:green;">This is a gfg.</p><pstyle="background-color:lightgreen">This is a gfg.</p><pstyle="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: