how to change class by is in js by toggle

How to Change Class by "is" in JS by Toggle

If you want to change the class of an element by checking if it has a certain class, you can use the toggle method in JavaScript. Here's how:

Step 1: Get the Element

First, you need to get the element you want to change the class of. You can use a variety of methods to do this, but one common way is to use the getElementById method:

const myElement = document.getElementById("my-element");

Step 2: Use Toggle to Change the Class

Once you have the element, you can use the classList.toggle method to add or remove a class based on whether or not the element already has that class:

myElement.classList.toggle("my-class");

In this example, if myElement already has the class my-class, it will be removed. If it doesn't have the class, it will be added.

Step 3: Add "is" for BEM Naming Convention

If you're using the BEM naming convention, you'll want to add a modifier to your class that indicates its state. The convention for this is to add "-is" followed by the state name. For example, if you have a button that is disabled, you would add the class button-is-disabled.

To add a "is" modifier to your class using the toggle method, simply add it as part of the class name:

myElement.classList.toggle("my-class-is-active");

In this example, if myElement already has the class my-class-is-active, it will be removed. If it doesn't have the class, it will be added.

Alternative Method: Use Contains to Check for Class

Another way to check if an element has a certain class is to use the contains method. This method returns a boolean value indicating whether or not the element has the specified class:

if (myElement.classList.contains("my-class")) {
  myElement.classList.remove("my-class");
} else {
  myElement.classList.add("my-class");
}

In this example, if myElement already has the class my-class, it will be removed. If it doesn't have the class, it will be added.

Conclusion

There are multiple ways to change the class of an element based on whether or not it already has a certain class. The toggle method is a simple and concise way to do this, but you can also use the contains method to check for the presence of a class before adding or removing it.