How to add or remove CSS class using jQuery?

Let us have an html tag which contains few CSS classes. We can remove or add CSS classes dynamically through jQuery.

For Example,

Following is the html code:

<html>
<head>
<style>
.red{
font-style: italic;
color: #ff0000;
}
.blue{
font-style: bold;
color: #ff00ff;
}
</style>
</head>
<body>
<input type="text" id="id_1" value="rosary" class="red"/>
</body>
</html>

To remove CSS class red dynamically through jQuery, use removeClass() jQuery inbuilt function.

<script type="text/javascript">
$("input[id='id_1']").removeClass("red");
</script>

To add CSS class blue dynamically through jQuery, use addClass() jQuery inbuilt function.

<script type="text/javascript">
$("input[id='id_1']").addClass("blue");
</script>

Share This Post

Related Articles

Leave a Reply

© 2017 Techy Diary. All rights reserved.
Powered by Charvi Groups