如何切换元素'；纯JavaScript中的s类？

我正在寻找一种将jQuery代码（用于响应菜单部分）转换为纯JavaScript的方法

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

$('.btn-navbar').click(function()
{
    $('.container-fluid:first').toggleClass('menu-hidden');
    $('#menu').toggleClass('hidden-phone');

    if (typeof masonryGallery != 'undefined') 
        masonryGallery();
});

---

看看这个例子：

---

2014答案：

较旧的浏览器可以使用：

---

另一方面，您不应该使用IDs（）。

这可能更简洁：

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

---

这一个也适用于IE的早期版本

函数类（ele，class1）{
var classes=ele.className；
var regex=new RegExp（'\\b'+class1+'\\b'）；
var hasOne=classes.match（regex）；
class1=class1.替换（/\s+/g'，）；
如果（hasOne）
ele.className=classes.replace（regex.）；
其他的
ele.className=classes+class1；
}

.red{
背景颜色：红色
}
div{
宽度：100px；
高度：100px；
边缘底部：10px；
边框：1px纯黑；
}

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

---

如果您想使用本机解决方案将类切换到元素，可以尝试以下建议。我在不同的情况下品尝过它，元素上有或没有其他类，我认为它非常有效：

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

---

下面是在类名上使用split（“”）表示IE>=9的代码：

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

函数切换类（元素，类名）{
var arrayClass=element.className.split（“”）；
var index=arrayClass.indexOf（类名称）；
如果（索引==-1）{
if（element.className！==“”）{
element.className+=“”
}
element.className+=className；
}否则{
阵列级拼接（索引1）；
element.className=“”；
对于（var i=0；i

以下是使用ES6实现的解决方案

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

用法示例

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

---

我知道我迟到了，但我碰巧看到了这一点，我有一个建议。。 对于那些寻求跨浏览器支持的人，我不建议通过JS切换类。 这可能需要做更多的工作，但所有浏览器都更支持它

document.getElementById（“myButton”）.addEventListener（“单击”，主题开关）；
函数主题开关（）{
const Body=document.Body
如果（Body.style.backgroundColor==='white'）{
Body.style.backgroundColor='黑色'；
}否则{
Body.style.backgroundColor='白色'；
}
}

正文{
背景：白色；
}

---

开关

不需要正则表达式只需使用classlist

var id=document.getElementById（'myButton'）；
函数切换（el，类名）{
if（el.classList.contains（classname））{
el.classList.remove（classname）
}
否则{
el.classList.add（类名称）
}
}
id.addEventListener（'单击'，（e）=>{
切换（例如，目标为“红色”）
})

.red{
背景：红色
}

---

Switch

document.getElementById（“菜单”）.classList.toggle（“隐藏电话”）：-）一些浏览器不支持classList:Hey@max，想选择一个答案吗？如果我们不能使用id，那我们怎么做呢？但是，我们将使用相同的类数量而不是旧的id，并使用类似var myList=document.getElementsByClassName（“abc”）？@goku类不会出现在窗口对象下面。只有身份证可以。请参见IE10和IE11支持的第二个参数，谢谢！它现在可以工作了：）我为循环添加了更多选项：var All=document.querySelectorAll（'.menu'）；对于（var i=0；i\b单词边界与css类名分隔符不一致。例如，如果类名包含破折号（“-”）字符，则它不起作用：btn，btn red将同时匹配

'\\b'+'btn'+'\\b'

！！

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

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

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