jQuery USES the toggleClass method to dynamically add methods that remove the Class style

2020-05-19 04:05:47
OfStack

This example shows how jQuery USES the toggleClass method to dynamically add and remove Class styles. Share with you for your reference. The specific analysis is as follows:

jQuery dynamically adds and removes Class through the toggleClass method. One execution is equivalent to addClass, and another is equivalent to removeClass. Run the following code and click the button to see the text paragraph font switching between blue and black


<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
 });
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Toggle class</button>
</body>
</html>

I hope this article has been helpful to your jQuery programming.