Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • jquery methods: addClass toggleClass and Remove class

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 309
    Comment on it

    jQuery has Basically three methods for CSS manipulation Following methods is explained using below example:

        1.addClass() - Adds one or more classes to the selected elements
        2.removeClass() - Removes one or more classes from the selected elements
        3.toggleClass() - Toggles between adding/removing classes from the selected elements

    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#p1").toggleClass("main1");
            $("#p2").addClass("main2");
            $("#p3").removeClass("main3");
        });
    });
    </script>
    <style>
    .main1 {
        font-size: 120%;
        color: red;
    }
    
    .main2 {
        font-size: 120%;
        color: blue;
    }
    
    .main3 {
        font-size: 120%;
        color: green;
    }
    </style>
    </head>
    <body>
    
    <button>Toggle class "main" for p elements</button>
    
    <p id="p1">This paragraph consist of toggle class it will cahnge its attribute on click function.</p>
    <p id="p2">This is another paragraph which has addClass function and the new class will added to it.</p>
    <p id="p3" class="main3"> This is the paragraph which is removed on click function.</p>
    <b>Note:</b> Click the button more than once to see the toggle effect.
    </body>
    </html>

    The first paragraph consist of toggle class it will change its attribute on click function.
    On clicking the another paragraph it will add the addClass method and changes the size and color of the text while the next paragraph will contain the remove method which will remove whole text from the window

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: