Add or remove class using JavaScript or Jquery

By

In javascript or jquery we mostly used add or remove class to complete some task like in button click remove the class of div and in another button click add previous class on this particluare div block. In Jquery addClass and removeClass method has been used but in javascript you have to used classList property.
I include both code here its because may be some project has been done with only core javascript and some with jquery.
Here we also learn
a. How to add the class in javascript & how add class in Jquery.
b. How to javascript set class work.
c. Javascript find element by class.
d. Remove class using javascript and jquery.

Javascript classList property has some handy methods
1. add : used for add the class in javascript
 Ex. document.getElementById('myElementId').classList.add('myClass');
2. remove : used for remove the class in javascript
 Ex. document.getElementById('myElementId').classList.remove('myClass');
3. toggle : used for toggle a class. Javascript toggle class is very useful to toggle.
 Ex. document.getElementById('myElementId').classList.toggle('myClass');
4. contains : used for check weather the class are exist or not .It return boolean value.
 Ex. document.getElementById('myElementId').classList.contains('myClass');
To add or remove multiple class please see note in output section of this article. 

Add Remove class jquery

<!DOCTYPE html>
<html>
<head id="headbody">
    <title>Add or remove class using JavaScript or Jquery</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function RedTheme() {
            $('#themeChange').removeClass("greenTheme");
            $('#themeChange').addClass("redTheme");
        }
        function GreenTheme() {
            $('#themeChange').removeClass("redTheme");
            $('#themeChange').addClass("greenTheme");
        }
    </script>
    <style>
        .redTheme
        {
            background: #f00;
        }
        .greenTheme
        {
            background: #0f0;
        }
    </style>
</head>
<body>
    <div>
        <input id="btnGreen" type="button" value="Green" onclick="GreenTheme()" />
        <input id="btnRed" type="button" value="Red" onclick="RedTheme()" />
        <br />
        <br />
        <div id="themeChange" style="height: 100px; width: 200px">
            Remove Class Demo
        </div>
    </div>
</body>
</html>

Add remove class in Javascript,javascript get element by class


<!DOCTYPE html>
<html>
<head id="headbody">
    <title>Add or remove class using JavaScript or Jquery</title>
    <script type="text/javascript">
        function RedTheme() {
            document.getElementById('themeChange').classList.remove("greenTheme");
            document.getElementById('themeChange').classList.add("redTheme");
        }
        function GreenTheme() {
            document.getElementById('themeChange').classList.remove("redTheme");
            document.getElementById('themeChange').classList.add("greenTheme");
        }

    </script>
    <style>
        .redTheme
        {
            background: #f00;
        }
        .greenTheme
        {
            background: #0f0;
        }
    </style>
</head>
<body>
    <div>
        <input id="btnGreen" type="button" value="Green" onclick="GreenTheme()" />
        <input id="btnRed" type="button" value="Red" onclick="RedTheme()" />
        <br />
        <br />
        <div id="themeChange" style="height: 100px; width: 200px">
            Remove Class Demo
        </div>
</div>
</body>
</html>


Output of javascript class




Remove Class Demo
Note: For remove the multiple class from element in jquery or javascript you have to write like below
In Jquery
$('#myElementId').addClass('myClass1 myClass2');
In Javascript
document.getElementById('myElementId').classList.add('myClass1','myClass2');
Simmilarly for remove

0 comments:

Post a Comment