How to switch element class to pure JavaScript?

Question

I am looking for a way to convert this jQuery code (which is used in the quick response section) into pure JavaScript.

If this is difficult to implement, use other JavaScript frameworks.

$('.btn-navbar').click(function() { $('.container-fluid:first').toggleClass('menu-hidden'); $('#menu').toggleClass('hidden-phone'); if (typeof masonryGallery != 'undefined') masonryGallery(); }); 

early

Answer 1

2014 answer : classList.toggle() is standard and is supported by most browsers .

Older browsers can use use classlist.js for class List.toggle () :

 var menu = document.querySelector('.menu') // Using a class instead, see note below. menu.classList.toggle('hidden-phone'); 

As a side, you should not use identifiers ( they leak globals into the JS window object ).

Answer 2

The simplest native method is Element.classList :

 <div class="menu" onclick="javascript: this.classList.toggle('hidden-phone');"> 

Answer 3

Take a look at this example: JS Fiddle

 function toggleClass(element, className){ if (!element || !className){ return; } var classString = element.className, nameIndex = classString.indexOf(className); if (nameIndex == -1) { classString += ' ' + className; } else { classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length); } element.className = classString; } 

Answer 4

This file also works in earlier versions of IE.

 function toogleClass(ele, class1) { var classes = ele.className; var regex = new RegExp('\\b' + class1 + '\\b'); var hasOne = classes.match(regex); class1 = class1.replace(/\s+/g, ''); if (hasOne) ele.className = classes.replace(regex, ''); else ele.className = classes + class1; } 

 .red { background-color: red } div { width: 100px; height: 100px; margin-bottom: 10px; border: 1px solid black; } 

 <div class="does red redAnother " onclick="toogleClass(this, 'red')"></div> <div class="does collapse navbar-collapse " onclick="toogleClass(this, 'red')"></div> 

Answer 5

This is perhaps more eloquent:

 function toggle(element, klass) { var classes = element.className.match(/\S+/g) || [], index = classes.indexOf(klass); index >= 0 ? classes.splice(index, 1) : classes.push(klass); element.className = classes.join(' '); } 

Answer 6

Try it (hope this works):

 // mixin (functionality) for toggle class function hasClass(ele, clsName) { var el = ele.className; el = el.split(' '); if(el.indexOf(clsName) > -1){ var cIndex = el.indexOf(clsName); el.splice(cIndex, 1); ele.className = " "; el.forEach(function(item, index){ ele.className += " " + item; }) } else { el.push(clsName); ele.className = " "; el.forEach(function(item, index){ ele.className += " " + item; }) } } // get all DOM element that we need for interactivity. var btnNavbar = document.getElementsByClassName('btn-navbar')[0]; var containerFluid = document.querySelector('.container-fluid:first'); var menu = document.getElementById('menu'); // on button click job btnNavbar.addEventListener('click', function(){ hasClass(containerFluid, 'menu-hidden'); hasClass(menu, 'hidden-phone'); })`enter code here` 

Answer 7

If you want to switch the class to an element, you can try this suggestion. I tried it in different cases, with or without other classes per element, and I think it works a lot:

 (function(objSelector, objClass){ document.querySelectorAll(objSelector).forEach(function(o){ o.addEventListener('click', function(e){ var $this = e.target, klass = $this.className, findClass = new RegExp('\\b\\s*' + objClass + '\\S*\\s?', 'g'); if( !findClass.test( $this.className ) ) if( klass ) $this.className = klass + ' ' + objClass; else $this.setAttribute('class', objClass); else { klass = klass.replace( findClass, '' ); if(klass) $this.className = klass; else $this.removeAttribute('class'); } }); }); })('.yourElemetnSelector', 'yourClass'); 

Answer 8

Here is the code for IE> = 9 using split ("") in className:

 function toggleClass(element, className) { var arrayClass = element.className.split(" "); var index = arrayClass.indexOf(className); if (index === -1) { if (element.className !== "") { element.className += ' ' } element.className += className; } else { arrayClass.splice(index, 1); element.className = ""; for (var i = 0; i < arrayClass.length; i++) { element.className += arrayClass[i]; if (i < arrayClass.length - 1) { element.className += " "; } } } }