如何在纯JavaScript中切换元素的类？

我正在寻找一种方法来将这个jQuery代码（在响应菜单部分中使用）转换为纯JavaScript。

如果很难实现，可以使用其他JavaScript框架。

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

提前致谢

Answer 1

2014答案 ： classList.toggle()是标准和大多数浏览器支持 。

较老的浏览器可以使用classList.toggle（）使用classlist.js ：

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

顺便说一句，你不应该使用ID（ 他们泄漏到JS window对象的全局variables ）。

Answer 2

最简单的本地方法是Element.classList ：

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

Answer 3

看看这个例子： JS小提琴

 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

这个也适用于早期版本的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

这也许更简洁：

 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

试试这个（希望它会起作用）：

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

如果你想切换一个类到一个元素，你可以尝试这个build议。 我在不同的情况下尝试过，有或没有其他类的元素，我认为它的作品非常多：

 (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

这是一个代码为IE> = 9在className上使用split（“”）：

 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 += " "; } } } }