How TO - Toggle Class

<!--

main_leaderboard, all: [728,90][970,90][320,50][468,60]

-->

How TO - Toggle Class

❮ Previous
Next ❯

Toggle between adding and removing a class name from an element with JavaScript.

Click the button to toggle class name!

function myFunction()
var x = document.getElementById('myDIV');
x.classList.toggle("mystyle");

Toggle Class

Step 1) Add HTML:

Toggle between adding a class name to the div element with id="myDIV" (in this example we use a button to toggle the class name).

Example

<button onclick="myFunction()">Try it</button>

<div id="myDIV">

This is a DIV element.
</div>

Step 2) Add CSS:

Add a class name to toggle:

Example

.mystyle
    width: 100%;
    padding:
25px;
    background-color: coral;

color: white;
    font-size: 25px;

<!--

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

-->

Step 3) Add JavaScript:

Get the <div> element with id="myDIV" and toggle between the "mystyle" class:

Example

function myFunction()
var element = document.getElementById("myDIV");

element.classList.toggle("mystyle");

Try it Yourself »

Cross-browser solution

Note: The classList property is not supported in Internet Explorer 9. The following
example uses a cross-browser solution/fallback code for IE9:

Example

var element = document.getElementById("myDIV");

if (element.classList)

element.classList.toggle("mystyle");
else
    // For IE9

var classes = element.className.split(" ");
    var i =
classes.indexOf("mystyle");

    if (i >= 0)

classes.splice(i, 1);
    else

classes.push("mystyle");

element.className = classes.join(" ");

Try it Yourself »

Tip: Also see How To Add A Class.

Tip: Also see How To Remove A Class.

Tip: Learn more about the classList property in our JavaScript Reference.

❮ Previous
Next ❯

搜尋此網誌

wefcdr