Come faccio a cambiare la class di un elemento in puro JavaScript?

Sto cercando un modo per convertire questo codice jQuery (che viene utilizzato nella sezione del menu reattivo) in puro JavaScript.

Se è difficile da implementare, è OK utilizzare altri framework JavaScript.

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

Grazie in anticipo

Risposta 2014 : classList.toggle() è lo standard e supportato dalla maggior parte dei browser .

I browser meno recenti possono utilizzare use classlist.js per classList.toggle () :

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

Per inciso, non dovresti utilizzare gli ID ( che perdono globalmente nell’object della window JS ).

Dai un’occhiata a questo esempio: 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; } 

Questo funziona anche nelle versioni precedenti di IE.

 function toogleClass(ele, class1) { var classs = ele.className; var regex = new RegExp('\\b' + class1 + '\\b'); var hasOne = classs.match(regex); class1 = class1.replace(/\s+/g, ''); if (hasOne) ele.className = classs.replace(regex, ''); else ele.className = classs + class1; } 
 .red { background-color: red } div { width: 100px; height: 100px; margin-bottom: 10px; border: 1px solid black; } 
 

Questo è forse più succinto:

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

Ecco la soluzione implementata con ES6

 const toggleClass = (el, className) => el.classList.toggle(className); 

esempio di utilizzo

 toggleClass(document.querySelector('div.active'), 'active'); // The div container will not have the 'active' class anymore 

Prova questo (speriamo che funzioni):

 // 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` 

Se si desidera triggersre una class in un elemento utilizzando la soluzione nativa, è ansible provare questo suggerimento. L’ho assaggiato in diversi casi, con o senza altre classi sull’elemento, e penso che funzioni più o meno:

 (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'); 

Ecco un codice per IE> = 9 usando split (“”) sul 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 += " "; } } } }