JQuery Add css() on click event

 

In this example we will use add() method to apply and remove css using click() method.

 
 
 
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script> function styleToggle(button) { if (button.value == 'Add Style') { $('span').add('p').addClass('styled').add('li').css({'background-color': 'fuchsia', 'font-family':' lucida sans'}); button.value = 'Remove Style'; } else { $('span').add('p').add('li').removeClass('styled').removeAttr('style'); button.value = 'Add Style'; } $().add("<br /><br><strong>Appwrk Information</strong>").appendTo("p:last"); } </script> </head> <body> <h1 style="color: purple">Employee Table</h1> <span>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively. We can serve you well because we have the best combination of affordability and quality. With our company solutions, we add efficiency to your operations; increase the visibility of your online presence to expand your reach, offer innovative digital learning solutions to improve your team performance.</span> <ul> <li>appwrk 1</li> <li>appwrk 2</li> <li>appwrk 3</li> </ul> <p>We are breathing in a planet where almost everything adjacent to us is technology driven. Be it designing, drafting, deploying, marketing, profits maximization or any other business process all are technology driven.</p> <p>Mobile phones have become synonymous with people's lifestyles. Our mobile application developers understand the customer's needs and solutions for all mobile devices.</p> <br /> <input type="button" value="Add Style" onclick="styleToggle(this)"></input> </body> </html>
Output