Hot File

Add or Remove a CSS Class with Vanilla JavaScript

View: 312    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: Javascript   Fields: Other

9 point/1 review File has been tested

Sometimes you need to add or remove a CSS class with JavaScript, and you don’t want to include an entire library like jQuery to do it

Introduction

Sometimes you need to add or remove a CSS class with JavaScript, and you don’t want to include an entire library like jQuery to do it.

This is useful in situations when you want your page elements to change in response to user actions.

Example uses include:

  • Showing or hiding a menu
  • Highlighting a form error
  • Showing a dialog box
  • Showing different content in response to a selection
  • Animating an element in response to a click

There are two JavaScript properties that let you work with classes: className and classList. The former is widely compatible, while the latter is more modern and convenient. If you don’t need to support IE 8 and 9, you can skipclassName.

We’ll start with the compatible version first.

Modifying Classes the Compatible Way

The JavaScript className property lets you access the class attribute of an HTML element. Some string manipulation will let us add and remove classes.

We’ll access HTML elements using querySelectorAll(), which is compatible with browsers from IE8 and up.

Add a Class

To add a class, we’ll write a function that takes in the elements we want to change and adds a specified class to all of them.

function addClass(elements, myClass) {

  // if we have a selector, get the chosen elements
  if (typeof(elements) === 'string') {
    elements = document.querySelectorAll(elements);
  }

  // if we have only one dom element, make it an array to simplify behavior
  else if (!elements.length) { elements=[elements]; }

  // add class to all chosen elements
  for (var i=0; i<elements.length; i++) {
    if (!(' '+elements[i].className+' ').indexOf(' '+myClass+' ') > -1) {
      elements[i].className += ' ' + myClass;
    }
  }
}

You’ll see how the function works soon, but to watch the function in action, feel free to use this CSS:

.red{
  background: red;
}

.highlight{
  background: gold;
}

…and this HTML:

<div id="iddiv" class="highlight">ID div</div>

<div class="classdiv">Class div</div>
<div class="classdiv">Class div</div>
<div class="classdiv">Class div</div>

Here are some usage examples of the function itself:

addClass('#iddiv','highlight');
addClass('.classdiv','highlight');

addClass(document.getElementById('iddiv'),'highlight');
addClass(document.querySelector('.classdiv'),'highlight');
addClass(document.querySelectorAll('.classdiv'),'highlight');

Notice that you can identify the HTML elements you want to change through a selector or you can directly pass in the elements themselves.

How Our addClass Function Works

Our addClass function first takes two parameters: the HTML elements we want to modify and the class we want to add. Our goal is to loop through each HTML element, make sure the class is not already there, and then add the class.

First, if we’ve chosen to identify our HTML elements through a selector such as #iddiv or .classdiv, then we can usequerySelectorAll() to grab all of our desired elements.

// if we have a selector, get the chosen elements
if (typeof(elements) === 'string') {
  elements = document.querySelectorAll(elements);
}

However, if DOM elements are fed into the function directly, we can loop through them. If there’s only one element, we’ll make it an array so we can use the same loop and simplify our code.

// if we have only one DOM element, make it an array to simplify behavior
else if (!elements.length) { elements=[elements]; }

Now that we have our elements in a format we can loop over, we’ll go through each one, check if the class is already there, and if not, we’ll add the class.

// add class to all chosen elements
for (var i=0; i<elements.length; i++) {
  if (!(' '+elements[i].className+' ').indexOf(' '+myClass+' ') > -1) {
    elements[i].className += ' ' + myClass;
  }
}

Notice we’re adding a space at the beginning and end in order to simplify the pattern we’re looking for and avoid needing a regular expression.

In any case, we’re done — you can now add a class!

Remove a Class

To remove a class, we can use the following function:

function removeClass(elements, myClass){

  // if we have a selector, get the chosen elements
  if (typeof(elements) === 'string') {
    elements = document.querySelectorAll(elements);
  }

  // if we have only one dom element, make it an array to simplify behavior
  else if (!elements.length) { elements=[elements]; }

  // create pattern to find class name
  var reg = new RegExp('(^| )'+myClass+'($| )','g');

  // remove class from all chosen elements
  for (var i=0; i<elements.length; i++) {
    elements[i].className = elements[i].className.replace(reg,' ');
  }
}

Most of this removeClass function works the same way as our addClass function; by gathering the desired HTML elements and looping through them. The only difference is the part where the class gets removed.

Here’s the class removal in more detail:

// create pattern to find class name
var reg = new RegExp('(^| )'+myClass+'($| )','g');

// remove class from all chosen elements
for (var i=0; i<elements.length; i++) {
  elements[i].className = elements[i].className.replace(reg,' ');
}

First, we create a regular expression to look for all instances of our desired class. The expression '(^| )'+myClass+'($| )' means the beginning or a space followed by myClass followed by the end or a space. The 'g' means global match, which means find all instances of the pattern.

Using our pattern, we replace the class name with a space. That way, class names in the middle of the list will remain separated, and there’s no harm done if the removed class is on the ends.

Modifying Classes the Modern Way

Browsers from IE10 and up support a property called classList, which makes an element’s classes much easier to deal with.

In a previous article, Craig Buckler provided a list of things classList can do:

document.getElementById("myelement").classList.add("myclass");

Let’s use this information to create functions that add and remove classes from all elements that match a selector.

These functions will get all desired elements, loop through them, and add or remove a class to each one.

Add Class

function addClass(selector, myClass) {

  // get all elements that match our selector
  elements = document.querySelectorAll(selector);

  // add class to all chosen elements
  for (var i=0; i<elements.length; i++) {
    elements[i].classList.add(myClass);
  }
}

// usage examples:
addClass('.class-selector', 'example-class');
addClass('#id-selector', 'example-class');

Remove Class

function removeClass(selector, myClass) {

  // get all elements that match our selector
  elements = document.querySelectorAll(selector);

  // remove class from all chosen elements
  for (var i=0; i<elements.length; i++) {
    elements[i].classList.remove(myClass);
  }
}

// usage examples:
removeClass('.class-selector', 'example-class');
removeClass('#id-selector', 'example-class');

In Summary

We’ve covered how to add and remove classes through className (the compatible way) and classList (the more modern way).

When you can control CSS classes through JavaScript, you unlock a lot of functionality including content display updates, animations, error messages, dialogs, menus, and more.

Add or Remove a CSS Class with Vanilla JavaScript

Add or Remove a CSS Class with Vanilla JavaScript Posted on 29-09-2016  Sometimes you need to add or remove a CSS class with JavaScript, and you don’t want to include an entire library like jQuery to do it 9/10 312

Comment:

To comment you must be logged in members.

Files with category

  • JUnit 5 State Of The Union using java

    View: 471    Download: 0   Comment: 0   Author: none  

    JUnit 5 State Of The Union using java

    Category: Javascript
    Fields: Other

    4.5/1 review
    JUnit 5 has been under development for about 14 months now and the prototype is almost a year old. Time to summarize what happened so far, where the project stands, and where it’s going.

  • Getting Started with Dropwizard using java

    View: 542    Download: 0   Comment: 0   Author: none  

    Getting Started with Dropwizard using java

    Category: Javascript
    Fields: Other

    4.5/1 review
    Dropwizard is a framework for building RESTful web services in Java. In this tutorial we’re going to have a look at how to get started with developing a Dropwizard application by building a new service from scratch.

  • Build Query NULL Value in MySql

    View: 248    Download: 0   Comment: 0   Author: none  

    Build Query NULL Value in MySql

    Category: Javascript
    Fields: Other

    2.5/2 review
    Misunderstanding NULL is common mistake beginners do while writing MySql query. While quering in MySql they compare column name with NULL. In MySql NULL is nothing or in simple word it isUnknown Value so if you use comparison operator for NULL values...

  • Manage Your JavaScript Application State with MobX

    View: 255    Download: 0   Comment: 0   Author: none  

    Manage Your JavaScript Application State with MobX

    Category: Javascript
    Fields: Other

    2.25/2 review
    This article was peer reviewed by Michel Weststrate and Aaron Boyer. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

  • Build Bringing Pages to Life with the Web Animations API

    View: 263    Download: 0   Comment: 0   Author: none  

    Build Bringing Pages to Life with the Web Animations API

    Category: Javascript
    Fields: Other

    4.5/2 review
    This article is by guest author Dudley Storey. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • How to Style Google Custom Search Manually

    View: 237    Download: 0   Comment: 0   Author: none  

    How to Style Google Custom Search Manually

    Category: Javascript
    Fields: Other

    0/0 review
    Website owners very often decide on using Google’s Custom Search Engine (GCSE) for searching through their content instead of using built-in and/or custom search functionality. The reason is simple – it’s much less work, and most often it does the...

  • Test React Components Using Jest

    View: 4859    Download: 0   Comment: 0   Author: none  

    Test React Components Using Jest

    Category: Javascript
    Fields: Other

    4.5/1 review
    This article is by guest author Jack Franklin. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • Programming Question Reverse String without using String function

    View: 641    Download: 0   Comment: 0   Author: none  

    Programming Question Reverse String without using String function

    Category: Javascript
    Fields: Other

    0/0 review
    Write a program to reverse string without using string function. You don’t have to use any in-built string library function. This problem can be solved by multiple approaches. Let’s check it.

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd