Tuesday, March 19, 2013

jQuery / dynamic removing CSS class

How to remove some css class dynamically with jQuery?
jQuery comes with removeClass() function to do that.

Example of dynamically removing css class.

<html>
<head>
<title>jQuery</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<style type="text/css">
    .backgroundGreen{
        background-color: #00ff00;
    }
 </style>

<script type="text/javascript">
 
    $(document).ready(function()
    {
        $("#J_action_removeCssClass").click( function()
        {
            $("#mymsg").removeClass("backgroundGreen");
        });        
    });
 
</script>

</head>

<body> 
    
    <a id="J_action_removeCssClass" href="javascript:void(0)" >Show message</a>

    <div id="mymsg" class="backgroundGreen">
        This is my text.
    </div>

</body>
</html>

Official documentation of jQuery removeClass is here.

No comments: