jQuery add or remove class dynamically on button click

jQuery has addClass() and removeClass() methods which makes it really easy to dynamically add or remove CSS class from HTML page elements. In this example we are going add and remove a class from the paragraph based on a button click. Here is how to use ...


jquery add remove class onclick
jquery add remove class onclick

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<html>
<head>
<title>jQuery add and remove CSS class example</title>
 
<link
 href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
 rel="stylesheet" type="text/css" />
<style type="text/css">
 
.shaded {
 background-color: #eeeee0;
}
 
</style>
<script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
 type="text/javascript"></script>
<script
 src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
 type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function() {
           
         $("#addClass").click(function () {
          $('#paragraph1').addClass('shaded');
            });
          
            $("#removeClass").click(function () {
          $('#paragraph1').removeClass('shaded');
            });
          
        });    
    </script>
 
</head>
<body>
 <fieldset>
   <legend>jQuery dynamically ADD and REMOVE CSS class</legend>
 
   <p id="paragraph1">
    <label for="myInputText1">
     My first input text is here:
    </label>
  
    <input
     id="myInputText1" type="text" name="inputBox" />
   </p>
   <p id="paragraph2">
    <label for="myInputText2">
     My second input text is here:
    </label>
  
    <input
     id="myInputText1" type="text" name="inputBox" />
   </p>
   <input id="addClass" type="button"
     value="Add background color" />
   <input id="removeClass" type="button"
     value="Remove background color" /> 
 </fieldset>
</body>
</html>
Labels:

No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.