Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jQuery add or remove class

Suggested Videos
Part 22 - jQuery wrap elements
Part 23 - jQuery append elements
Part 24 - jQuery insert element before and after



In this video we will discuss
1. How to check if an element has a css class
2. How to add or remove css classes
3. How to toggle css classes



hasClass Returns true if an element has the specified class otherwise false
addClass Adds one or more specified classes. To add multiple classes separate them with a space.
removeClass Removes one or multiple or all classes. To remove multiple classes separate them with a space. To remove all classes, don't specify any class name.
toggleClass Toggles one or more specified classes. If the element has the specified class then it is removed, if the class is not present then it is added.

<html>
<head>
    <title></title>
    <script src="jquery-1.11.2.js"></script>
    <style>
        .boldClass {
            font-weight: bold;
        }

        .italicsClass {
            font-style: italic;
        }

        .colorClass {
            color: red;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btn1').click(function () {
                $('p').addClass('colorClass');
            });

            $('#btn2').click(function () {
                $('p').removeClass('colorClass');
            });

            $('#btn3').click(function () {
                $('p').addClass('colorClass italicsClass');
            });

            $('#btn4').click(function () {
                $('p').removeClass('colorClass italicsClass');
            });

            $('#btn5').click(function () {
                $('p').addClass('colorClass italicsClass boldClass');
            });

            $('#btn6').click(function () {
                $('p').removeClass();
            });
        });
    </script>
</head>
<body style="font-family:Arial">
    <p>Pragim Technologies</p>
    <table>
        <tr>
            <td>
                <input id="btn1" style="width:250px" type="button"
                       value="Add Color Class" />
            </td>
            <td>
                <input id="btn2" style="width:250px" type="button"
                       value="Remove Color Class" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="btn3" style="width:250px" type="button"
                       value="Add Color and Italics Classes" />
            </td>
            <td>
                <input id="btn4" style="width:250px" type="button"
                       value="Remove Color and Italics Classes" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="btn5" style="width:250px" type="button"
                       value="Add Color, Italics & Bold Classes" />
            </td>
            <td>
                <input id="btn6" style="width:250px" type="button"
                       value="Remove All Classes" />
            </td>
        </tr>
    </table>
</body>
</html>

Output :
jquery addclass example

<html>
<head>
    <title></title>
    <script src="jquery-1.11.2.js"></script>
    <style>
        .textBoxStyle {
            background-color: green;
            color: white;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('input[type="text"]').each(function () {
                $(this).focus(function () {
                    $(this).addClass('textBoxStyle');
                });

                $(this).blur(function () {
                    $(this).removeClass('textBoxStyle');
                });
            });
        });
    </script>
</head>
<body style="font-family:Arial">
    <table>
        <tr>
            <td>First Name</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Gender</td>
            <td>
                <select>
                    <option value="select">Please Select</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="text" /></td>
        </tr>
    </table>
</body>
</html>

Output :
jquery toggleclass example

jQuery tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.