Quick Tip: Add or Remove a CSS Class with Vanilla JavaScript

Use JavaScript to dynamically add and delete CSS classes to easily manipulate web elements! This article will explain how to use the className and classList attributes of JavaScript to efficiently manage CSS classes, and realize dynamic modification of web page elements, such as displaying/hiding menus, highlighting form errors or element animations.

Core points:

• JavaScript can be used to dynamically modify page elements based on user interactions (such as showing/hiding menus, highlighting form errors, or animation effects).
• className and classList properties are powerful tools for operating CSS classes; className have wider compatibility, while classList is more modern and convenient.
• can create functions and add or delete classes to elements using className or classList attributes. These functions can take a string selector or element itself as parameters, loop through the element and add or delete the specified class.
The
• classList attribute (supported by browsers in IE10 and above) provides a series of methods to operate classes, including add, remove and toggle, simplifying the process of adding or deleting classes.

Compatibility scheme: Use classNameProperties

The

className attribute allows access to the class attribute of the HTML element. Through string operations, we can add and delete classes. We will use the querySelectorAll() method to select HTML elements (compatible with IE8 and above browsers).

Add class:

<code class="language-javascript">function addClass(elements, myClass) {
  if (!elements) return;
  if (typeof elements === 'string') elements = document.querySelectorAll(elements);
  else if (elements.tagName) elements = [elements];
  for (let i = 0; i < elements.length; i++) {
    if (!(' ' + elements[i].className + ' ').includes(' ' + myClass + ' ')) {
      elements[i].className += ' ' + myClass;
    }
  }
}</code>

Delete class:

<code class="language-javascript">function removeClass(elements, myClass) {
  if (!elements) return;
  if (typeof elements === 'string') elements = document.querySelectorAll(elements);
  else if (elements.tagName) elements = [elements];
  const reg = new RegExp('(^| )' + myClass + '($| )', 'g');
  for (let i = 0; i < elements.length; i++) {
    elements[i].className = elements[i].className.replace(reg, ' ');
  }
}</code>

Modernization Solution: Use classListProperties

IE10 and above browsers support classList attributes, simplifying the operation of classes.

Add class:

<code class="language-javascript">function addClass(selector, myClass) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(element => element.classList.add(myClass));
}</code>

Delete class:

<code class="language-javascript">function removeClass(selector, myClass) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(element => element.classList.remove(myClass));
}</code>

Summary

This article introduces methods to add and delete CSS classes using className and classList properties. By mastering these skills, you can easily achieve dynamic effects of web elements and improve user experience.

FAQs (FAQs)

• Purpose of adding or removing CSS classes using Vanilla JS? Dynamically controls the appearance and behavior of HTML elements, such as changing styles in response to user operations, showing/hiding elements, creating animation effects, etc.

• How to add multiple classes using classList.add()? Pass the class name as an independent parameter: element.classList.add("class1", "class2", "class3");

• Can you delete classes that do not exist on the element? Yes, classList.remove() will not report an error, but will not perform any operation.

• How to check if an element contains a specific class? Use the classList.contains() method to return a boolean value.

• How to manipulate classes with multiple elements at the same time? Use querySelectorAll() to select elements, and then loop through and manipulate the classes of each element.

• How to switch the class of an element? Use classList.toggle() method.

• The difference between

  className and classList? className is a string attribute; classList is a read-only attribute that returns the DOMTokenList object, providing a more convenient class operation method.

• classListDoes SVG elements be supported? Support.

• How is the browser compatibility of

  classList? Modern browsers are widely supported, and IE9 and below are not supported.

• Can the classList method be called in a chain? Yes.

I hope this article will be helpful to you!

The above is the detailed content of Quick Tip: Add or Remove a CSS Class with Vanilla JavaScript. For more information, please follow other related articles on the PHP Chinese website!