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

IT技术 javascript dom toggle
2021-01-24 22:45:58

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

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

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

    if (typeof masonryGallery != 'undefined') 
        masonryGallery();
});
6个回答

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

较旧的浏览器可以使用classlist.js for classList.toggle()：

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

顺便说一句，您不应该使用 ID（它们会将全局变量泄漏到 JSwindow对象中）。

IE10 和 IE11 支持，除了第二个参数
2021-03-15 22:45:58
@goku 类不会出现在 window 对象下方。只有身份证可以。见2ality.com/2012/08/ids-are-global.html
2021-03-19 22:45:58
太感谢了！它现在正在工作:) 我为循环添加了更多选项： var All = document.querySelectorAll('.menu'); for (var i = 0; i < All.length; i++){ All[i].classList.toggle('hidden-phone'); }
2021-03-20 22:45:58
但是，那么我们将拥有相同的类数量而不是旧的 ID，并使用类似 var myList = document.getElementsByClassName("abc") 之类的东西？
2021-04-03 22:45:58
如果我们不能使用 ID，那我们怎么做呢？
2021-04-09 22:45:58

这是用 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
ES6 很棒，但这个解决方案只是根据其他现有答案使用“document.querySelector”和“element.classList.toggle”。
2021-03-16 22:45:58
这不是针对大量文件的解决方案。不适用于 querySelectorAll（至少在 FF 中），因此对于那些希望在读取的多个元素上切换类的人：-)（我一开始没有继续阅读 - 因此我的评论！）
2021-03-24 22:45:58
如果解决方案是“面向供应商的”，则没有解决方案是有效的，互联网是面向开放标准的。
2021-04-02 22:45:58

看看这个例子：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;
}
如果我在“red”之后有一个名为“redOther”的课程怎么办？
2021-03-21 22:45:58

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

\b单词边界与 css 类名分隔符不一致。例如，如果类名包含破折号（“-”）字符，则它不起作用：btn，btn-red 都将匹配'\\b' + 'btn' + '\\b'！
2021-03-30 22:45:58

不需要正则表达式只需使用类列表

var id=document.getElementById('myButton');


function toggle(el,classname){
if(el.classList.contains(classname)){
el.classList.remove(classname)
}
else{
el.classList.add(classname)
}
}




id.addEventListener('click',(e)=>{

toggle(e.target,'red')
})
.red{

background:red

}
<button id="myButton">Switch</button>

上面例子的简单用法

var id=document.getElementById('myButton');


function toggle(el,classname){
el.classList.toggle(classname)
}




id.addEventListener('click',(e)=>{

toggle(e.target,'red')
})
.red{

background:red

}
<button id="myButton">Switch</button>

其它你可能感兴趣的问题
上一篇使用 JavaScript 或 HTML 刷新页面 下一篇使用 jQuery 将一个标签替换为另一个