How to Toggle Class With JavaScript

1. Toggle Class of an HTML Element on Mouse Hover in JavaScript
2. Toggle Class of an HTML Element on Mouse Click in JavaScript

We will introduce a method to toggle the class of HTML elements by using JavaScript.

Toggle Class of an HTML Element on Mouse Hover in JavaScript

Toggling the class means if there is no class name assigned to the HTML element, then a class name can be set to it dynamically, or if a specific class is already present, then it can be removed dynamically. In computing, mouseover is a graphical control element activated when the user moves or hovers the pointer over a trigger area, usually with a mouse.

Toggling functionality is introduced in JavaScript. In the JavaScript file, we use a querySelector() method that returns the first element that matches a specified CSS selector(s) in the document. In the file below, #container id is associated with the <div> element; hence we got the <div> element on a variable container. To achieve the required functionality of toggling classes on the hover of a mouse, we need to use the addEventListener() method, which attaches an event handler to the HTML document. And the actual events which we used are mouseenter and mouseleave events. The mouseenter event occurs when the mouse pointer is moved onto an element. The mouseleave event occurs when the mouse pointer is moved out of the element.

As the mouseenter event occurs, we use the classList property, the add() and remove() methods. When the mouse pointer is moved over the <div> element class, the first div element is removed by the remove() method, and the class second is added to the <div> element. Similarly, when the mouse pointer is moved out, it adds the class first and removes the class second. Hence toggle is achieved when the mouse has hovered over the <div> element.

We have an HTML document where links to the CSS file styles.css and the JavaScript file index.js is specified on HTML document using the <link> and <script></script> tags respectively. We want to achieve the functionality on hovering the mouse pointer over the <div> element its class to be toggled. We will do this by using JavaScript. In HTML, we have the <div> element uniquely identified by the id container, and a class first is already associated with the same element.

In CSS, we define the properties and values of class selectors. We made the CSS simple, and the class first has a property background, and its value is green. Similarly, the class second has a property background and value orange.

Example Code:

<div id="container" class="first">
  <h1>
    JavaScript is Easy
  </h1>
</div>

var container = document.querySelector('#container');

container.addEventListener('mouseenter', function() {
  this.classList.remove('first');
  this.classList.add('second');
})
container.addEventListener('mouseleave', function() {
  this.classList.add('first');
  this.classList.remove('second');
})

.first {
    background: green;
}

.second {
    background: orange;
}

Toggle Class of an HTML Element on Mouse Click in JavaScript

We can toggle an HTML class using JavaScript on mouse click as we did for the mouse over the event in the method above. For example, create a paragraph with a <p> tag with the id of p. Write some text inside the tag. Then, create a <button> tag with onclick attribute. Call the function myFunc() with the onclick attribute. Write the text Button between the tags.

In CSS, selct the paragraphClass with the class selector and give the font-size to 30px and color to red. In JavaScript, write the myFunc() function and select the p id of HTML with getElementById and store in a para variable. Call the classList property and then toggle() method with the variable. Write the paragraphClass class as the parameter of the toggle() method.

We got hold of the p element inside variable para using the getElementById() method . Using the classList property we used the toggle() function to <p> element of the HTML document. When the bottom is clicked and myFunc() is executed, the CSS class selector paragraphClass is toggled on and off on <p> element. Hence, toggling is achieved on click of mouse bottom.

Example Code:

<p id="p">
        Click Button to toggle between classes
</p>
<button onclick="myFunc()">
        Button
</button>

      .paragraphClass {
            font-size: 30px;
            color: red;
        }

function myFunc() {
  var para = document.getElementById('p');
  para.classList.toggle('paragraphClass');
}